使用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。
  1. 配置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')
  1. 最新版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"
    ]
}
  1. 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"
    ]
}

你可能感兴趣的:(使用webpack的注意点)