前言
该版本为：webpack 4.0 ,写这篇文章事件是2018.03.18，请关注webpack版本更新避免不必要的麻烦、错误，开始之前先安装node等（你懂的）,最好也把淘宝镜像安装了；
开始
全局安装webpack
$ npm install -g webpack
创建目录
mkdir webpacktest && cd webpacktest
初始化
npm init -y；//-y为全部yes，减少你一通敲回车
然后文件目录中安装webpack
npm i webpack@next --save-dev @next我也不知道是什么意思
安装cli工具
npm i webpack --save-dev
如果报错
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
请记住安装
npm install webpack-cli -D
再在package.json中配置script
"script": {
"build":"webpack"
}
这个时候直接运行webpack肯定是会报错的。之前的版本需要webpack.congfig.js里面配置一大堆东西；
现在不需要了
直接建立你想要的文件
例如./src/index.js
随笔写几句代码 console.log('new webpack 4.0 is so easy')
npm run build
可以看到直接打包好了放在./dist/main.js中
index.js运行结果和main.js一样。说明咱们的操作是对的；庆祝下吧。
之前参考一些文章。例如 ：入门webpack这篇文章就够了；按照上面的步骤根本走不下来。
原因是，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"
以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。
我们在根目录执行：
npm run dev
可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件的代码。
还遇到错误提示
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
只需要在package.json中添加配置项：
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
然后npm run dev 这个时候dist里面的文件的不是压缩过的，但是npm run build 这个时候dist的main.js就是压缩了的。
成功提示：
1521345408(1).jpg
项目中会多出./dist/main.js
1521427357(1).jpg
网友评论