webpack二（以webpack4.x起步）

一.基本安装

首先我们要创建一个目录，初始化npm，以及在本地安装webpack：复制代码

mkdir webpackapp && cd webpackapp复制代码

npm init -y复制代码

npm install --save-dev webapck复制代码

现在我们看一下我们创建的目录以及目录下的结构复制代码

二.简单实用webpack

我们先全局安装webpack： npm install -g webpack复制代码

此时，我们可以执行命令：webpack -v来查看webpack的版本号。复制代码

我们在根目录下新建一个文件：hello.js，并在其中输入代码。复制代码

function hello(str) { alert(str); } hello('hello world!');复制代码

这时，我们在命令行中输入：复制代码

webpack hello.js bundle.js复制代码

然而，预期的结果和想象的不一样：复制代码

The CLI moved into a separate package: webpack-cli Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)复制代码

或复制代码

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包中。所以呢，现在想要使用CLI（命令行工具）就必须安装webpack-cli才行。复制代码

安装webpack-cli:复制代码

npm install webpack-cli -D复制代码

再次运行：复制代码

webpack hello.js bundle.js复制代码

发现还是报出：复制代码

The CLI moved into a separate package: webpack-cli Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)复制代码

这时，我们就要全局安装webpack-cli：复制代码

npm install webpack-cli -g复制代码

现在，我们再试一下。复制代码

webpack hello.js bundle.js复制代码

结果又出现了新情况：复制代码

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in 'C:\Users\Administrator\Desktop\webpackapp' @ 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\Administrator\Desktop\webpackapp'复制代码

翻译成中文：复制代码

未找到入口模块发生错误：错误：无法解析：'C:\Users\Administrator\Desktop\webpackapp'复制代码

它的意思就是，表明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目录及dist目录下的main.js文件它会自动生成。所以说呢，这种'webpack 文件a 文件b'的打包方式已经不适用了，而是改为直接运行：复制代码

webpack --mode development复制代码

或复制代码

webpack --mde production复制代码

出现下面这种情况说明打包成功：复制代码

C:\Users\Administrator\Desktop\webpackapp>webpack --mode development Hash: c66758f7d1a4004b7b60 Version: webpack 4.5.0 Time: 608ms Built at: 2018-4-6 00:42:40 Asset Size Chunks Chunk Names main.js 2.88 KiB main [emitted] main Entrypoint main = main.js [./src/index.js] 65 bytes {main} [built]复制代码

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

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack --mode development", "build":"webpack --mode production" }复制代码

以后在打包的过程中，我们只需要执行npm run dev就相当于执行webpack --mode development， 执行npm run build就相当于执行webpack --mode production复制代码

我们如果需要配置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、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。 6、在webpack –mode development/production可串联设置其他参数。复制代码

今天就讲到这里吧，后续会继续更新，别忘了关注了哦！

转载于:https://juejin.im/post/5ac65a376fb9a028cc6174f3