webpack4 升级迁移的实现


Posted in Javascript onSeptember 12, 2018

好久不看 webpack 已经从 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 

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

  • 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"
 }
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 #Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 #Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 #Javascript
浅谈webpack4 图片处理汇总
Sep 12 #Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 #Javascript
vue this.reload 方法 配置
Sep 12 #Javascript
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
You might like
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jquery实现数字输入框
2017/02/22 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
Python实现包含min函数的栈
2016/04/29 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python实现的knn算法示例
2018/06/14 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
商务英语专业自荐信
2013/10/14 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
基于Redission的分布式锁实战
2022/08/14 Redis