webpack4 升级迁移的实现
好久不看 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"color: #ff0000">配置 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"
}
}
差不多就这样子可以完成基本的配置了；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：React 项目迁移 Webpack Babel7的实现