webpack4.1.1的使用详细教程

安装全局webpack

　　cnpm install -g webpack

安装全局webpack-cli

　　npm install -g webpack-cli

初始化：生成package.json文件

　　npm init

安装包

　　npm install --save lodash

新建src文件夹：文件名不能修改

新建index.html文件，注意src="./dist/main.js，不能修改

目录结构如下：

 

webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。

因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行

　　webpack --mode development

　　webpack --mode production

这样便能够实现将'./src/index.js'打包成'./dist/main.js'。

不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：

　　"dev":"webpack --mode development",

　　"build":"webpack --mode production"

执行webpack --mode development

 

执行npm run dev，相当于执行webpack --mode development