webpack4.16开发环境配置

1、安装

sudo npm install -g webpack webpack-cli

安装webpack-cli的目的：

CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。 
除了webpack自身外，请额外安装webpack-cli来使用CLI。 
-> 使用npm安装：npm install webpack-cli -D 
->使用yarn安装：yarn add webpack-cli -D

webpack和webpack-cli全局安装目的：

旧版本的webpack中，webpack指令要能在命令行中使用，需要全局安装webpack，而不是本地安装，因此这里的webpack-cli也应该是同理。

2.入口文件

初始化：

npm init

入口文件需要放在项目根目录的src文件夹的index.js中：

webpack4.x以'./src/index.js'作为入口，单单创建src文件而没有index.js文件仍然会报错

3.打包命令

#开发模式打包，输出非压缩./dist/main.js
webpack --mode=development
#产品模式打包，输入压缩./dist/main.js
webpack --mode=production

以上两个命令将根目录下的src/index.js打包成./dist/main.js，其中输出路径和文件自动生成

4.命令简写

在package.json中的scripts增加

"dev":"webpack --mode=development",
"pro":"webpack --mode=production"

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

运行npm run pro相当于webpack --mode=production

参考文章：webpack4.x开发环境配置