webpack4.x开发环境配置
写这篇文章的初衷在于，当我们使用npm安装webpack时，若不指定webpack的版本，将默认安装最新版，笔者测试时默认安装的是4.26.1，并不能照搬老教程的方法。为此，笔者进行了最新版配置的探索，使用的是windows操作系统，如果你的是webpack4.x版本，可参考进行配置。
注意：本文并不是直接把正确步骤放上去，而是分析了各种报错情况及原因，文章的步骤显得绕弯子。如果仅仅想看正确步骤，建议直接看第八点的配置步骤再返回查找各步骤的操作。
一、全局安装webpack（不推荐）
如果我们按照旧版本的安装方式，直接使用npm全局安装webpack，我们预期全局安装webpack后，便能在命令行中使用webpack指令。我们在命令行输入：
npm install -g webpack
当执行该操作后，便在C:\Users\你的用户名\AppData\Roaming\npm\node_modules创建了webpack文件夹，里面存储了刚刚全局安装的webpack模块。
二、创建项目
我们在合适位置新建一个文件夹webpack-test，用于存放我们的项目。
命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化：
npm init
这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关于项目的信息。
三、尝试打包出现提示
我们在项目根目录新建一个文件index.js，并在其中输入代码：
function hello(str) {
alert(str);
}
hello(‘hello world!’);
然后，我们便可以满怀期待地尝试打包，在命令行输入：
webpack index.js bundle.js
意思是将index.js打包成另一个文件bundle.js。但很不幸，会提示：
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
翻译成中文：
CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。
除了webpack自身外，请额外安装webpack-cli来使用CLI。
-> 使用npm安装：npm install webpack-cli -D
->使用yarn安装：yarn add webpack-cli -D
意思是，我们需要额外安装webpack-cli，否则便不能在命令行中使用webpack的相关命令。
四、安装webpack-cli
我们在项目中本地安装webpack-cli：
npm install webpack-cli -D
这里-D参数和–save-dev的作用相同，只是一种简写而已。笔者这里安装完成后，显示webpack-cli版本是3.1.2。
我们在根目录再次输入：
webpack src/index.js dist/bundle.js
很不幸，还是提示：
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
这表明我们本地安装webpack-cli后并没有起作用，在命令行中依然不能使用webpack命令。那么是什么地方出了问题呢？
必须再全局安装
npm install -g webpack-cli
五、设置模式
我们再次尝试打包：
webpack src/index.js dist/bundle.js
看样子似乎是可以运行了，但又出现了新的提示：
WARNING in configuration
The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this enviroment.
ERROR in multi ./index.js bundle.js
Module not found:ERROR:Can’t resolve ‘bundle.js’ in ‘C:/Users/你的用户名/Desktop/webpack-test’
@ multi ./index.js bundle.js
翻译成中文：
配置警告：
“mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
multi错误 ./ hello.js bundle.js
未发现模块：错误：无法解析’C:/Users/你的用户名/Desktop/webpack-test’中的bundle.js
@ multi ./index.js bundle.js
这里提示我们存在的第一个问题是没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：
webpack --mode development
我们看到进行了打包并显示了Hash、Version、Time、Build at信息，表明已经可以打包。不过，仍然有错误提示：
ERROR in Entry module not found:ERROR:Can’t resolve ‘./src’ in ‘C:/Users/你的用户名/Desktop/webpack-test’
翻译成中文：
未找到入口模块发生错误：错误：无法解析’C:/Users/你的用户名/Desktop/webpack-test’中的’./src’
六、创建入口文件
这表明webpack4.x是以项目根目录下的’./src’作为入口，但我们的项目中缺乏该路径，因此我们在根目录下创建src文件夹，事实上webpack4.x以’./src/index.js’作为入口，单单创建src文件而没有index.js文件仍然会报错，因此我们
将index.js移动到’./src’。
现在如果我们再次执行
webpack index.js bundle.js
会提示can.t resolve相关的错误。
原因是，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文件的代码。
七、配置其他参数
我们如果需要配置webpack指令的其他参数，只需要在webpack –mode production/development后加上其他参数即可，如：
webpack --mode development --watch --progress --display-modules --colors --display-reasons
当然，这也可以写入package.json的scripts之中。
八、总结
我们可以将以上探索进行整理总结，首先是注意事项：
1、webpack-cli必须要全局安装，否则不能使用webpack指令；
2、webpack也必须要全局安装，否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。
配置步骤：
1、创建工程目录；
2、初始化工程目录：npm init。
3、全局安装webpack-cli。
4、全局安装webpack。
5、开发模式安装 npm install webpack --save-dev
6、开发模式安装 npm install webpack-cli --save-dev
7、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。
8、在webpack –mode development/production可串联设置其他参数。
目前
笔者最近测试了一下，只在开发环境下同时安装webpack和webpack-cli也能够运行，不过也需要配置webpack –mode development/production进行打包
也可以新建一个webpack.config.js文件来简单配置一些相关脚本
const path = require('path');
console.log(path.resolve('./'));
module.exports={
//打包入口文件
entry:"./src/index.js",
//模式：开发模式
mode:"development",
// 输出文件
output:{
path:path.resolve('./dist'),//输出文件的绝对路径
filename:"bundle.js"//打包后的文件名
},
//模块解析规则
module:{
rules:[{
test:/\.js$/,
use:"babel-loader",
exclude:/node_modules/
}]
}
}
注
经过webpack打包后的文件任然会保留原来代码中ES6的代码，我们还需要安装babel来帮助我们将ES6的代码转化成ES5代码
npm i babel-core babel-loader babel-preset-es2015 -D
完成后我们需要新建一个.babelrc的文件，简单的配置一下
{
"presets":[
"es2015"
],
"plugins":[]
}
然后我们继续打包
webpack --mode development
但是会报错，主要的错误就是你使用babel-core@6.的话，系统提示你使用babel-loader@7.版本，如果是这个版本号就不会报错
不是的话我们需要重新安装
npm i babel-loader@7.* -D
完成后再运行webpack --mode development
出现下面的代码那就恭喜你成功了
Hash: b440c141764fecc88adc
Version: webpack 4.26.1
Time: 1048ms
Built at: 2018-12-01 16:51:37
Asset Size Chunks Chunk Names
bundle.js 3.95 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.js] 154 bytes {main} [built]