webpack（学习随笔：2023-06-06）

webpack配置

• webpack.config.js(文件名,给node运行时看的,所以按照node的模块化语法来写)

const path = require("path")
module.exports = {
    mode: "production", // 设置打包的模式，production表示生产模式 development 开发模式
    
    entry: "./hello/hello.js" ,  //用来指定打包时的主文件 默认为./src/index.js,一般不做修改
    entry: ["./src/a.js","./src/b.js"], //支持数组,多个文件打包在一起
    entry: {
        a: "./src/a.js",
        b: "./src/b.js"
    },  //支持对象格式,分别打包,键名为打包后的文件名
    
    output:{ 
        path:"path.resolve(__dirname,'dist')", //指定打包目录,必须是绝对路径(打包后生成dist文件夹)
        filename: "bundle.js", //打包后的文件名
        filename: "[name].js", //打包后的文件名(打包多文件时,entry为对象时)
        clean: true, //是否自动清空dist(打包目录)
    },  //配置代码打包后的地址
    
    /* webpack默认情况下只会处理js文件, 如果要处理其他类型的文件,需要为其引入loader,例如 css-loader,单一原则,一个loader只干一件事*/
    module:{
        rules:[
            {
                test:/\.css$/i,
                use: ["style-loader","css-loader"], //有顺序要求,从后向前执行(先执行css-loader)
            },
            {
                test:/\.(jpg|png)$/i,
                type:"acset/resourse" //图片直接加载资源类型的数据,可以通过指定type来处理
            }
        ],
    }
}

• babel 语法转换,提高代码兼容性
  • 不同的转换会有不同的插件,例如:@babel/core(核心),@babel/preset-env(预设环境)

/*配置*/
 module:{
        rules:[
           {
                test: /.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
           }
        ],
    }

• 插件(plugin)
  • 为webpack扩展功能

// 引入html插件
const HTMLPlugin = require("html-webpack-plugin")
plugins: [
       new HTMLPlugin({
           // title: "Hello Webpack", //指定title的信息
           template: "./src/index.html" //模板
       })
   ],

• sourceMap
  • 源码和编译后的代码做映射

devtool: "inline-source-map"