手寫 webpack4.x初始化工程

1.全局安裝webpack4.x

cnpm install webpack webpack-cli --g

2.初始化npm

cnpm init --y(默認都是yes)

3.安裝依賴包

cnpm install

4.在package.json文件添加

“private”:true(防止npm發佈私有包）

在script屬性下添加

"dev":webpack --mode development"
"build":"webpack --mode production"

5.在項目文件夾下新建目錄src 在src目錄下可以新建index.js index.html等webpack默認打包文件是src目錄下的index.js文件
此時可以初次嘗試打包文件試下

6.在項目目錄下新建webpack.confg.js
首先把 node中的path引進來
const path = require("path")
module.exports = {
entry: {
index: "./src/index.js"//入口chunk
},
output: { //出口配置
filename: '[name].[contenthash.7].js', //入口chunk文件名稱 hash chunkhash contenthash 每次構建生成7位hash
chunkFilename: '[id].[contenthash.7].js',
path: path.resolve(__dirname, "dist") //輸出文件夾
},
mode: 'production' //設置環境 development production
}

再次修改package.json下
"dev":webpack --config webpack.config.js"
"build":"webpack --config webpack.config.js"

當內容改變 再次打包時 hash值會跟着改變 這是爲了避免緩存問題