NO 18---- webpack 4.x 使用遇到的问题以及开发配置

最近在项目中用webpack的过程当中总是出现问题，非常纳闷，按理说一直这样使用没有问题啊，通过我研究后发现，是由于在webpack更新到4.x以后，操做方式与以前相比变化很大。而咱们使用npm默认安装是最新版本，所以，不能再用老版本的方式操做新版本。因此，今天就记录一下新版本的使用配置。

1、全局安装webpack

若是咱们按照旧版本的安装方式，直接使用npm全局安装webpack，咱们预期全局安装webpack后，便能在命令行中使用webpack指令。咱们在命令行输入：

npm install -g webpack

当执行该操做后，便在C:\Users\你的用户名\AppData\Roaming\npm\node_modules建立了webpack文件夹，里面存储了刚刚全局安装的webpack模块。

2、建立项目

咱们在合适位置新建一个文件夹webpack-test，用于存放咱们的项目。
命令行中定位到webpack-test文件夹下，输入如下命令进行项目的初始化：

npm init

这里，要求设置不少选项，能够按项目状况配置也能够不填直接回车。完成后，咱们发现文件夹中增长了package.json文件，它用于保存关于项目的信息。

3、尝试打包出现提示

咱们在项目根目录新建一个文件hello.js，并在其中输入代码：

function hello(str) { alert(str); } hello('hello world!');

而后，咱们即可以满怀期待地尝试打包，在命令行输入：

webpack hello.js bundle.js

意思是将hello.js打包成另外一个文件bundle.js。但很不幸，4.1.1版本会提示：

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的相关命令。

4、安装webpack-cli

咱们在项目中本地安装webpack-cli：

npm install webpack-cli -D

这里-D参数和–save-dev的做用相同，只是一种简写而已。笔者这里安装完成后，显示webpack-cli版本是2.0.10。
咱们在根目录再次输入：

webpack hello.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

这代表咱们本地安装webpack-cli后并无起做用，在命令行中依然不能使用webpack命令。那么是什么地方出了问题呢？
咱们不难想到，

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

咱们卸载本地安装的webpack-cli，全局安装webpack-cli：

npm uninstall webpack-cli npm install -g webpack-cli

5、设置模式

咱们再次尝试打包：

webpack hello.js 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 ./hello.js bundle.js Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test' @ multi ./hello.js bundle.js

翻译成中文：

配置警告：
“mode”选项还没有设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。

multi错误 ./ hello.js bundle.js

未发现模块：错误：没法解析’C:/Users/你的用户名/Desktop/webpack-test’中的bundle.js

@ multi ./hello.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’

6、建立入口文件

这代表webpack4.x是以项目根目录下的'./src'做为入口，但咱们的项目中缺少该路径，所以咱们在根目录下建立src文件夹，事实上webpack4.x以'./src/index.js'做为入口，单单建立src文件而没有index.js文件仍然会报错，所以咱们

将hello.js移动到'./src'，并重命名为index.js。

如今若是咱们再次执行

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.config.js配置文件中这样写：

// webpack.config.js
module.exports = {
    mode: "production",
    // ...
}

在终端直接输入webpack也是能够进行打包的。。。。

 

7、配置其余参数

咱们若是须要配置webpack指令的其余参数，只须要在webpack –mode production/development后加上其余参数便可，如：

webpack --mode development --watch --progress --display-modules --colors --display-reasons

固然，这也能够写入package.json的scripts之中。

8、总结

咱们能够将以上探索进行整理总结，首先是注意事项：

一、webpack-cli必需要全局安装，不然不能使用webpack指令；
二、webpack也必需要全局安装，不然也不能使用webpack指令。
三、webpack4.x中webpack.config.js这样的配置文件不是必须的。
四、默认入口文件是./src/index.js，默认输出文件./dist/main.js。

配置步骤：

一、建立工程目录； 二、初始化工程目录：npm init。 三、全局安装webpack-cli。 四、全局安装webpack。 五、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，做用相同。 六、在webpack –mode development/production可串联设置其余参数。