最全webpack4.x环境配置以及低版本迁移问题

Posted 2021-04-29 瀚林府

虽然网络上关于webpack的教程不少，但是大多已经过时，由于webpack版本更新后许多操作变化很大，很多教程的经验已经不适合。使用的是mac系统，如果你的是webpack4.x版本，可参考进行配置。 
做了一些遇到安装过程的问题解决方式，不断的填坑的过程:

一、全局安装webpack

npm install -g webpack

当执行该操作后，便全局安装的webpack模块。

二、创建项目

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

npm init

这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，文件夹中增加了package.json文件，它用于保存关于项目的信息。

三、尝试打包出现提示

之前的项目打包会在根目录新建一个文件hello.js，并在其中输入代码：

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

然后，我们便可以满怀期待地尝试打包，在命令行输入：

webpack hello.js bundle.js

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

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 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中，webpack指令要能在命令行中使用，需要全局安装webpack，而不是本地安装，因此这里的webpack-cli也应该是同理。

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

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

五、设置模式

我们再次尝试打包：

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.jsModule not found:ERROR:Can't resolve 'bundle.js'@ multi ./hello.js bundle.js

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

multi错误 ./ hello.js bundle.js

@ multi ./hello.js bundle.js

默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：

webpack --mode development

我们看到进行了打包并显示了Hash、Version、Time、Build at信息，表明已经可以打包。不过，仍然有错误提示：

ERROR in Entry module not found:ERROR:Can't resolve './src'

未找到入口模块发生错误：错误：中的’./src’

六、创建入口文件

这表明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文件的代码。调试main.js的时候，html文件也放在dist目录下调用main.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、默认入口文件是./src/index.js，默认输出文件./dist/main.js。

配置步骤：

1、创建工程目录； 
2、初始化工程目录：npm init。

3、全局安装webpack。 
4、全局安装webpack-cli。 
5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。 
6、在webpack –mode development/production可串联设置其他参数。

7、在dist目录下建立html文件调试调用main.js

关于迁移问题，很多3.x的项目很多依赖包的方式不兼容，会放弃迁移

但是我觉得，要拥抱变化，虽然说webpack更新的速度真的是惊人，但是这也表明大前端日趋活跃，贡献者越来越多。

迁移问题一

默认的入口为'./src/'和默认出口'./dist'； 
对压缩(optimization.minimize)的设置，默认在production时开启，在development时关闭。

迁移问题二

新增了mode/--mode参数来表示是开发还是生产，mode有两个可选值：development和production，production不支持监听，production侧重于打包后的文件大小，development侧重于构建的速度。

在配置文件中配置：

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

迁移问题三

在之前的vue脚手架创建的基于webpack的工程，在webpack.prod.conf.js中可以清晰的看到配置中有这么一行：

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
 
   
   
 

  
    
    
  
1
 
   
   
 

在webpack4.0中已经可以压缩es6代码，如：

class user {
    getUsername() {        // to do
    }
}

迁移问题四

在webpack升级的同时，对应的许多依赖也需要相应的进行升级，下面是在vuec-cli的脚手架中需要的更新；对于其他工程，注意看控制台的报错，是哪个插件报的错就去升级那个插件，如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin 
webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve 
vue-loader => npm i -D vue-loader 
extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next 
…

迁移问题五

如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子：

const webpack = require('webpack')；new webpack.optimize.SplitChunksPlugin({
    chunks: "all",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    name: true,
    cacheGroups: {        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
        },
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        }
    }
})

迁移问题六

移除loaders，必须使用rules

如果是CommonJS, AMD, ESM三种类型的模块，使用javascript/auto； 
如果是EcmaScript modules(.mjs)，使用javascript/esm，其他的模块类型将不生效； 
如果只有CommonJS和EcmaScript modules不可用，使用javascript/dynamic； 
如果是json类型的文件，允许使用require和import来导入json，使用json； 
如果是Webassembly，使用webassembly/experimental —— 官方说是一个实验性的功能。

举个栗子：

rules: [
   {
        test: /\.json$/,
        type: "javascript/auto"
    }
]

支持ES6的方式导入JSON文件，并且可以过滤无用的代码

下面是三种导入json文件的方法：

let jsonData = require('./data.json');import jsonData from './data.json'import { first } from './data.json'

对于webpack的这次升级这里没有一一列举，选了几个相对关键的点，具体可以去看官网；有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟，目前遇到的基本都解决了。