使用Webpack配置文件
使用npx webpack index.js对文件进行打包的时候，是使用的webpack的默认配置，对项目的入口文件进行打包。webpack为了提高易用性，提供了很多默认配置，但是随着项目复杂度的提升和其各工程各自的特点，使用默认配置已经不足以满足我们对项目工程化的需求，webpack支持使用自定义配置文件，对项目进行打包编译。
- 使用
npx webpack进行打包的时候，webpack会自动的在当前项目的根目录中寻找默认的配置文件webpack.config.js对项目进行打包 - 使用
npm webpack --config [filename]：指定特定的配置文件作为配置，使用webpack对项目进行打包
示例：使用配置文件打包项目（path:/source_code/02/02-04）
目录结构
- src
- index.js
- header.js
- sidebar.js
- content.js
- footer.js
- index.html
- webpack.config.js
文件内容：
- webpack.config.js
const path = require('path')
module.exports = {
// 定义入口文件
entry: path.resolve(__dirname, "src/js/index.js"),
// 定义打包后输入的文件
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
}
- 编辑
package.json，在scripts�中增加配置项："bundle": "webpack --config ./source_code/02/02-04/webpack.config.js"。 - 执行
npm run bundle，对代码进行打包编译。 - 生成打包编译后的文件目录
dist和dist/bundle.js，将index.html移动到dist目录中，修改引入的javascript为打包生成的bundle.js。
