1.全局安裝webpack4.x

創(chuàng)新互聯(lián)主營(yíng)弋陽(yáng)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開(kāi)發(fā),弋陽(yáng)h5成都微信小程序搭建,弋陽(yáng)網(wǎng)站營(yíng)銷推廣歡迎弋陽(yáng)等地區(qū)企業(yè)咨詢

cnpm install webpack webpack-cli --g

2.初始化npm

cnpm init --y(默認(rèn)都是yes)

3.安裝依賴包

cnpm install

4.在package.json文件添加

“private”:true(防止npm發(fā)布私有包）

在script屬性下添加

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

5.在項(xiàng)目文件夾下新建目錄src 在src目錄下可以新建index.js index.html等webpack默認(rèn)打包文件是src目錄下的index.js文件
此時(shí)可以初次嘗試打包文件試下

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

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

當(dāng)內(nèi)容改變 再次打包時(shí) hash值會(huì)跟著改變 這是為了避免緩存問(wèn)題