02-Webpack基本配置

Webpack基本配置

• 按照webpack定义的规范使用CommandJS规范导出一个配置对象即可，使用CommandJS规范的原因是要使用的nodejs中的一些内置模块和变量
• 要求webpack配置文件名为webpack.config.js并且在项目最外层，此时执行webpack命令时，会自动寻找到该配置文件
• 若不想使用默认的配置文件名和路径，则需要在执行webpack命令时，使用config参数指定即可

const path = require("path");
module.exports = {
  entry: "./index.js",	//入口文件路径
  output: {
    filename: "main.js", //输出文件名
    path: path.resolve(__dirname, "dist") //输出文件根目录
  },
  mode: "production", //生产环境
}

entry和output其他配置

对于多路口的项目entry可写成对象模式，对应的output中输出就需要使用占位符了

const path = require("path");
module.exports = {
  entry: {
    main: "./index.js",	//入口文件路径1
    test: "./index.js"	//入口文件路径2，可以是同一个文件
  },
  output: {
    filename: "[name].js", //输出文件名，其中name对应的就是main和test
    path: path.resolve(__dirname, "dist") //输出文件根目录
  },
  mode: "production", //生产环境
}

常用占位符

占位符	描述
[name]	对应entry中的key值
[hash]	这次打包生成的hash值，也可控制hash值的位数，比如：使用[hash:5]可取前5位hash值
[chunkhash]	根据jjs和css代码混合后内容生成的hash，也就是一个chunk，同一个chunk的hash值是相同的
[contenhash]	根据源代码内容生成的hash值，一般情况下文件内容不变hash值不变

有时可能contenhash的值即使没修改内容也会改变，因为模块之间的关联代码耦合在打包后的文件，增加以下配置，即关联代码单独抽离成一个文件，从而保证contenhash的值不变

optimization: {	//与基本配置项平级
  runtimeChunk: { name: "runtime" };
}

resolve

const path = require("path");
module.exports = {
  entry: "./index.js",
  resolve: {
    extensions: [".js", "json"],	//当引入模块时，可省略的后缀
    mainFiles: ["index"],	//当引入模块时，省略文件名自动寻找index
    alias: {
      abc: "a/b/c"	//路径别名，在引入模块时，只需要写require("abc")，就等同于require("a/b/c")
    }
  }
}