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

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 

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

• 和 eslint 类似，主要用于规范我们的样式文件
• 用于单独打包样式文件的插件
• 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"
 }
}

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

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