使用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

1. 配置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。

2. 配置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代码兼容性

1. 使用babel-loader解决js代码兼容性。
2. 如果不使用babel，ie 10 及以下浏览器不支持webpack-dev-server,并且使用热更新功能需要引入babel-preset-env,babel-polyfill,因为ie10以下不支持Promise。
3. 即使使用babel-polyfill，也不能实现ie8支持webpack-dev-server,因为ie8不支持babel-polyfill。

• 配置文件中引入polyfill

// webpack.config.js
{
    entry: ['babel-polyfill', './src/main.js']
}

• 也可以在入口文件中引入

// main.js
require('babel-polyfill')

4. 最新版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可以有效解决。

配置.babelrc文件

{
    "presets": [
        "env"
    ]
}

5. ie8构建生产环境时压缩代码时default的问题,default是es3保留字。

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        ie8: true,
        compress: {
            // 不将引号属性查询转换成点号形式
            // e['default'] --> e.default
            properties: false
        }
    })
]

• 处理自身代码模块化的默认导出模块。

a. 尽量不要使用export default，用到默认导出的情况，可以使用commonjs的模块化标准。

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