使用Webpack配置文件
使用npx webpack index.js對文件進(jìn)行打包的時候摔癣，是使用的webpack的默認(rèn)配置，對項目的入口文件進(jìn)行打包互纯。webpack為了提高易用性红柱，提供了很多默認(rèn)配置，但是隨著項目復(fù)雜度的提升和其各工程各自的特點宁仔，使用默認(rèn)配置已經(jīng)不足以滿足我們對項目工程化的需求稠屠，webpack支持使用自定義配置文件，對項目進(jìn)行打包編譯翎苫。
- 使用
npx webpack進(jìn)行打包的時候权埠，webpack會自動的在當(dāng)前項目的根目錄中尋找默認(rèn)的配置文件webpack.config.js對項目進(jìn)行打包 - 使用
npm webpack --config [filename]：指定特定的配置文件作為配置，使用webpack對項目進(jìn)行打包
示例：使用配置文件打包項目（path:/source_code/02/02-04）
目錄結(jié)構(gòu)
- src
- index.js
- header.js
- sidebar.js
- content.js
- footer.js
- index.html
- webpack.config.js
文件內(nèi)容：
- 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"攘蔽。 - 執(zhí)行
npm run bundle，對代碼進(jìn)行打包編譯呐粘。 - 生成打包編譯后的文件目錄
dist和dist/bundle.js满俗，將index.html移動到dist目錄中转捕，修改引入的javascript為打包生成的bundle.js。
