webpack4 升级迁移的实现

2019-11-19 12:58:04

字体：大中小

来源：转载

供稿：网友

好久不看 webpack 已经从 3到4了，其实很早到今年2月份就开始发布 webpack 4 的 beta 版本；

每一次 webpack 的升级都还是建议阅读下《webpack 4: released today! - Sean T. Larkin》。你需要明白，为什么 webpack又要迭代一个新的里程碑，以及带了什么新的特性；这里简单总结下:

Faster！！！ Webpack 在 bundle bundle 的时间会缩短至少 60 个点，最高可以到 98%; (我们似乎可以节省一些时间去这些事情)
Mode 增加了新的属性，来支持 development 和 production 的区别，从而达到更好的优化效果；
CommonsChunkPlugin 不将启用；取而代之的新的 API optimization.splitChunks;
WebAssembly 的支持，现在默认支持 import export 和 WebAssembly 的模块；

如果你是 webpack 2+ 迁移的话，相对而言成本会小一些，因为配置语法变化不大，但是如果 webpack 1 迁移的话，建议你仔细看下后面的配置变化；

安装 Webpack

首先需要更新 Webpack 的版本，我们可以重新安装 Webpack

npm i -g webpack

然后再安装一个轻量级的命令行工具

yarn add webpack webpack-cli -D

配置 babel

我们可以自己建一个目录存放 webpack 的配置，我们暂时就叫 webpack 也行；

babel 配置

npm i babel-loader babel-core babel-preset-env --save-dev

我们在 webpack 目录下新建 loaders.js 文件；

const JSLoader = {  test: //.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: {  presets: ['env'] } }};module.exports = {  JSLoader: JSLoader};

当前你也可以使用之前的方式 .babelrc 中配置插件和 preset 。

然后再 webpack/webpack.config.js 加上基本的 loader 配置

const path = require('path'); const loaders = require('./loaders'); module.exports = {  entry: ["./src/js/app.js"], module: { rules: [  loaders.JSLoader ] }, output: { path: path.resolve(__dirname, "dist"), filename: "js/[name].bundle.js" },};

添加 eslint

首先在项目里面配置 eslint：

eslint --init

配置完成后，我们需要安装 eslint-loader

npm i eslint-loader --save-dev

同理，我们可以修改 webpack/loaders.js ；

...const ESLintLoader = {  test: //.js$/, enforce: 'pre', exclude: /node_modules/, use: { loader: 'eslint-loader', options: {  configFile: __dirname + '/.eslintrc' }, }};module.exports = {  JSLoader: JSLoader, ESLintLoader: ESLintLoader,};

然后再 webpack/webpack.config.js 中修改

module.exports = {  ... module: { rules: [  loaders.JSLoader,  loaders.ESLintLoader ] }, ...};

处理 sass/less

接下来我们看下如何处理 sass 或者 less ，代码例子以 sass 为例子；

复制代码代码如下:

npm i node-sass css-loader stylelint  stylelint-webpack-plugin optimize-css-assets-webpack-plugin postcss postcss-preset-env postcss-loader  cssnano sass-loader mini-css-extract-plugin --save-dev  

其中几个插件需要简单说明下;

stylelint 和 eslint 类似，主要用于规范我们的样式文件
mini-css-extract-plugin 用于单独打包样式文件的插件
optimize-css-assets-webpack-plugin 用于优化样式资源的插件

接下来我们需要配置 sass loader 和 css loader;

const cssLoader = {  test: //.css$/, use: [ {  loader: MiniCssExtractPlugin.loader, }, {  loader: 'css-loader', }, {  loader: 'postcss-loader',  options: {  config: {   path: path.join(__dirname, './postcss.config.js'),  }  }, }, ],};const sassLoader = {  test: //.scss$/, use: [ {  loader: MiniCssExtractPlugin.loader, }, {  loader: 'css-loader', }, {  loader: 'postcss-loader',  options: {  config: {   path: path.join(__dirname, './postcss.config.js'),  }  }, }, {  loader: 'sass-loader', }, ],};const cssLoader = {  test: //.css$/, use: [ {  loader: MiniCssExtractPlugin.loader, }, {  loader: 'css-loader', }, {  loader: 'postcss-loader',  options: {  config: {   path: path.join(__dirname, './postcss.config.js'),  }  }, }, ],};const sassLoader = {  test: //.scss$/, use: [ {  loader: MiniCssExtractPlugin.loader, }, {  loader: 'css-loader', }, {  loader: 'postcss-loader',  options: {  config: {   path: path.join(__dirname, './postcss.config.js'),  }  }, }, {  loader: 'sass-loader', }, ],};...module.exports = {  ... sassLoader, cssLoader,};

增加插件处理用于优化样式文件;

在 webpacj/pugin.js 中添加下面内容;

const _ExtractTextPlugin = require('extract-text-webpack-plugin'); const _HtmlWebpackPlugin = require('html-webpack-plugin'); const _MiniCssExtractPlugin = require("mini-css-extract-plugin"); const _StyleLintPlugin = require('stylelint-webpack-plugin'); const _OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const cssnano = require('cssnano');const path = require('path');const StyleLintPlugin = new _StyleLintPlugin({  configFile: path.resolve(__dirname, './stylelint.config.js'), context: path.resolve(__dirname, '../css'), files: '**/*.css', failOnError: false, quiet: false,});const MiniCssExtractPlugin = new _MiniCssExtractPlugin({  // both options are optional filename: "vr-player.min.css", chunkFilename: "[id].css"});const OptimizeCssAssetsPlugin = new _OptimizeCssAssetsPlugin({  assetNameRegExp: //.css$/g, cssProcessor: cssnano, cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true})module.exports = {  MiniCssExtractPlugin, StyleLintPlugin, OptimizeCssAssetsPlugin};

在 webpack/webpack.config.js 中增加 plugins 的配置；

...const plugins = require('./plugins');module.exports = {  ... plugins: [  // plugins.ExtractTextPlugin,  plugins.MiniCssExtractPlugin,  plugins.HtmlWebpackPlugin ]};

处理 svg 或者图片资源

npm i image-webpack-loader url-loader base64-inline-loader --save-dev

修改 webpack/loader.js 中的配置：

const svgLoader = {  test: //.svg$/, use: [ {  loader: 'image-webpack-loader', }, {  loader: 'base64-inline-loader', } ],};const imageLoader = {  test: //.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=1024&name=images/[name]_[hash].[ext]'};

同理可以需要在webpack 中修改对应文件；

配置 devServer

npm i webpack-dev-server --save-dev

在新的配置中我们可以在 devServer 中配置我们起一个服务器的端口号和网络控制;

module.exports = {  ... devServer: { port: 9000, headers: { 'Access-Control-Allow-Origin': '*' }, hot: true, inline: true, progress: true, quiet: true, compress: true, disableHostCheck: true, },}

设置 package.json 的命令

{ "scripts": { "build": "webpack -p --config ./webpack/webpack.config.js --display-error-details", "dev": "webpack-dev-server --config ./webpack/webpack.config.js --display-error-details" }}

差不多就这样子可以完成基本的配置了；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Vue通过ref父子组件拿值方法

下一篇：React 项目迁移 Webpack Babel7的实现