手写webpack4.x初始化工程

  

1。全局安装webpack4。x

  

<强> cnpm安装webpack webpack-cli——g

  

2。初始化npm

  

<强> cnpm init - y (默认都是yes)

  

3。安装依赖包

  

<强> cnpm安装

  

4。在package.json文件添加

  

<强>“私人”:真正的(防止npm发布私有包)

  

在脚本属性下添加

  

<强>“dev": webpack——模式development"
<强>“build":“webpack——模式production"

  

5。在项目文件夹下新建目录src在src目录下可以新建索引。js index . html等<强> webpack默认打包文件是src目录下的index.js文件
此时可以初次尝试打包文件试下

  

6。在项目目录下新建webpack.confg。js
首先把节点中的道路引进来
const path=要求(“path")
模块。出口={
条目:{
指数:“。/src/index.js"//入口块
},
输出:{//出口配置
文件名:“[名字]。[contenthash.7]。js ',//入口块文件名称哈希chunkhash contenthash每次构建生成7位哈希
chunkFilename:“[id]。[contenthash.7]。js”,
路径:路径。解决(__dirname“dist")//输出文件夹
},
模式:“生产”//设置环境发展生产
}

  

再次修改包。json下
<强>“dev": webpack——配置webpack.config.js"
<强>“build":“webpack——配置webpack.config.js"

  

当内容改变再次打包时散列值会跟着改变这是为了避免缓存问题

手写webpack4.x初始化工程