微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

webpack4 升级迁移的实现

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

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

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

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

安装 Webpack

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

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

配置 babel

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

babel 配置

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

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

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

添加 eslint

首先在项目里面配置 eslint:

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

同理,我们可以修改 webpack/loaders.js ;

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

处理 sass/less

接下来我们看下如何处理 sass 或者 less ,代码例子以 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

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

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

rush:js;"> 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$/,{ loader: 'sass-loader',};

const cssLoader = {
test: /.css$/,};
...

module.exports = {
...
sassLoader,cssLoader,};

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

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

rush: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 的配置;

rush:js;"> ... const plugins = require('./plugins');

module.exports = {
...
plugins: [
// plugins.ExtractTextPlugin,plugins.MiniCssExtractPlugin,plugins.HtmlWebpackPlugin
]
};

处理 svg 或者 图片资源

rush:bash;"> npm i image-webpack-loader url-loader base64-inline-loader --save-dev

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

rush: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

rush:bash;"> npm i webpack-dev-server --save-dev

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

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

设置 package.json 的命令

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐