使用webpack的注意点
【使用webpack的注意点】作者：叶茂；
标签: webpack，兼容性
知识点
webpack简要介绍
- 打包前端代码，优化前端工作流。
- 使用webpack3, 如果需要使用DevServer，需要安装webpack-dev-server2。
- 使用一些其他插件或loader时也要密切注意版本兼容问题。
// @后面带版本号可安装指定版本的npm包
yarn add webpack@^3 webpack-dev-server@2 --dev
- webpack-dev-server开启热更新需要同时使用HotModuleReplacementPlugin插件。
- ie8 无法使用热更新。
{
devServer: {
hot: true
}plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
css兼容性
- 使用postcss-loader 和 autoprefixer解决css代码兼容性。只是在属性前加浏览器前缀，解决范围有限，但是百利无一害。
yarn add postcss-loader autoprefixer --dev
- 配置postcss.config.js文件
- 支持的browserlistgithub
// postcss-loader使用autoprefixer有以下两种方式配置
module.exports = {
plugins: [
//不传参
// require('autoprefixer')// 传参
require('autoprefixer')({
browsers: ['last 5 versions']
})
]
}
- ie8下不分离css代码会报错，原因是js创建style标签会用到ie8不支持的对象方法。
- 使用extract-text-webpack-plugin分离css代码，webpack4使用mini-css-extract-plugin。
- 配置webpack.config.js文件
// 需要注意loader顺序
module: {
rules: [
// 开发环境可不分离css
/*{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}*/// css代码分离
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader', 'postcss-loader'],
})
},]
}// css代码分离需要引入插件
plugins: [
new ExtractTextPlugin('app.css')
]
js代码兼容性
- 使用babel-loader解决js代码兼容性。
- 如果不使用babel，ie 10 及以下浏览器不支持webpack-dev-server,并且使用热更新功能需要引入babel-preset-env,babel-polyfill,因为ie10以下不支持Promise。
- 即使使用babel-polyfill，也不能实现ie8支持webpack-dev-server,因为ie8不支持babel-polyfill。
- 配置文件中引入polyfill
// webpack.config.js
{
entry: ['babel-polyfill', './src/main.js']
}- 也可以在入口文件中引入
// main.js
require('babel-polyfill')
- 最新版babel-loader 使用@babel/core @babel/preset-env, 注意版本兼容问题。
yarn add babel-loader@^7 babel-core babel-preset-env --dev// 最新版babel-loader
yarn add babel-loader @babel/core @babel/preset-env --dev
- 使用babel-env解决ie浏览器js代码兼容
- ie11对es6基本不支持，常用的模板字符串、箭头函数都不支持，使用babel-env可以有效解决。
{
"presets": [
"env"
]
}
- ie8构建生产环境时压缩代码时default的问题,default是es3保留字。
plugins: [
new webpack.optimize.UglifyJsPlugin({
ie8: true,
compress: {
// 不将引号属性查询转换成点号形式
// e['default'] --> e.default
properties: false
}
})
]
- 处理自身代码模块化的默认导出模块。
demo.js
module.exports = function () {
console.log('default function')
}
main.js
var fn = require('./demo.js')fn()b. 使用babel-plugin-transform-es2015-modules-simple-commonjs插件。
{
"plugins": [
"transform-es2015-modules-simple-commonjs"
]
}
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量