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 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
javascript常用的方法分享
Jul 01 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
JS实现滑动导航效果
Jan 14 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
如何用threejs实现实时多边形折射
May 07 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 动态执行带有参数的类方法
2009/04/10 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
市场部业务员岗位职责
2014/04/02 职场文书
明确岗位职责
2015/02/14 职场文书
离婚案件被告代理词
2015/05/23 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python