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 相关文章推荐
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
javascript实现二叉树遍历的代码
Jun 08 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 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
php5数字型字符串加解密代码
2008/04/24 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
浅析return false的正确使用
2013/11/04 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Swift中的协议(protocol)学习教程
2016/07/08 Python
wxPython之解决闪烁的问题
2018/01/15 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
python中pop()函数的语法与实例
2020/12/01 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
单位人事专员介绍信
2014/01/11 职场文书
领导干部培训感言
2014/01/23 职场文书
《花木兰》教学反思
2014/04/09 职场文书
南京导游词
2015/02/03 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS