概念

Webpack是一个模块打包机，它可以将我们项目中的所有js、图片、css等资源，根据其入口文件的依赖关系，打包成一个能被浏览器识别的js文件。能够帮助前端开发将打包的过程更智能化和自动化。

WebPack和Grunt以及Gulp相比有什么特性

Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

开始使用

安装webpack，目前webpack已更新到4.x版本，且大力度宣传的是 cli 方式启动，更推崇的是让开发者使用高度封装的 cli。基于此，我们应该安装webpack^4.1.1、webpack-cli^2.0.10(想要执行webpack的命令必须有这个包)、webpack-dev-server^3.1.0。

webpack的mode

webpack4 的mode给出了两种配置：development和production。生产模式下，启用了 代码压缩、作用域提升（scope hoisting）、 tree-shaking，使代码最精简；开发模式下，相较于更小体积的代码，提供的是打包速度上的优化。所以，我们一般配置2个文件，webpack.dev.conf.js和webpack.prod.conf.js。修改package.json里面的 s：

\" s\": {
   \"dev\": \"webpack --mode development\",
   \"build\": \"webpack --mode production\"
}

按项目搭建诉求加入配置

一般诉求：

  1. js的处理：转换 ES6 代码，解决浏览器兼容问题
  2. css的处理：编译css，自动添加前缀，抽取css到独立文件
  3. html的处理：复制并压缩html文件
  4. dist的清理：打包前清理源目录文件
  5. assets的处理：静态资源处理
  6. server的启用：development 模式下启动服务器并实时刷新
  7. source-map
  8. eslint

1.转换js，解决兼容性问题，用 babel 转换 ES6 代码，用 babel 转换 ES6 代码需要使用到babel-loader，我们需要安装一系列的依赖：

npm i babel-core babel-loader babel-preset-env --save-dev

然后在根目录新建一个babel配置文件.babelrc：

{
    \"presets\": [
        [
            \"@babel/preset-env\",
            {
                \"targets\": {
                    \"browsers\": [
                        \"last 2 iOS major versions\",
                        \"last 2 Android major versions\"
                    ],
                    \"ios\":\"8.2\"
                },
                \"exclude\":[\"es6.promise\"],
                \"useBuiltIns\": \"usage\",
                \"debug\": true
            }
        ]
    ],
    \"plugins\": [\"@babel/transform-runtime\"]
}

 

Babel默认只转换新的 语法，而不转换新的API。 例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 .assign）都不会转译。 如果想使用这些新的对象和方法，则需要为当前环境提供一个polyfill。

解决方案一：

引入babel-polyfill，它会”加载整个polyfill库”，针对编译的代码中新的API进行处理，并且在代码中插入一些帮助函数。

解决方案二：

babel-runtime

两种方案区别：

babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。babel-runtime配置了之后，打包时会“按需加载”，当用到某个polifill时再引入对应的垫子，这样可以减少体积。但在某些情况下仍然不能被babel-runtime替代， 例如，代码：[1, 2, 3].includes(3)， .assign({}, {key: \'value\'})，Array， 以及其他”实例”下es6的方法，babel-runtime是无法支持的， 因为babel-runtime只支持到static的方法。

因此，babel-runtime适合在组件，类库项目中使用，而babel-polyfill适合在业务项目中使用。

babel-runtime版本搭配注意：

//安装babel-runtime和babel-plugin-transform-runtime，配置如下：
{
    \"plugins\": [\"transform-runtime\"]
}
//高版本的babel，安装@babel/plugin-transform-runtime、@babel/runtime
{
    \"plugins\": [\"@babel/transform-runtime\"]
}

 

2.转换css

相关的loder：less-loader、postcss-loader、css-loader、style-loader等。利用mini-css-extract-plugin来打包到一个文件里面。参考代码：

const MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");
module.exports = (env, argv) => {
    const devMode = argv.mode !== \'production\'
    return {
        module: {
            rules: [
                    {
                        test: /\\.css$/,
                        use: [
                            devMode ? \'style-loader\' : MiniCssExtractPlugin.loader,
                            \'css-loader\',
                            \'postcss-loader\'
                        ]
                    },
                ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: \"[name].css\",
                chunkFilename: \"[id].css\"
            })
        ]
    }
}

 

3.处理html文件，一般用html-webpack-plugin，参考代码：

const HtmlWebPackPlugin = require(\"html-webpack-plugin\");
module.exports = {
    module: {
        rules: [
            {   
                test: /\\.html$/,
                use: [{
                loader: \"html-loader\",
                options: {
                    minimize: true
                }
            }]
        }
    ]
},
plugins: [
    new HtmlWebPackPlugin({
        template: \"./src/index.html\",
        filename: \"./index.html\"
    })
    ]
};

更多配置解释，参考https://segmentfault.com/a/1190000007294861

 

4.清理

每次打包，都会生成项目的静态资源，随着某些文件的增删，我们的 dist 目录下可能产生一些不再使用的静态资源，webpack并不会自动判断哪些是需要的资源，为了不让这些旧文件也部署到生产环境上占用空间，所以在 webpack 打包前最好能清理 dist 目录。

const CleanWebpackPlugin = require(\'clean-webpack-plugin\');
module.exports = {
    plugins: [
        new CleanWebpackPlugin([\'dist\']),
    ]
};

 

5.资源处理

           {
                test: /\\.html$/,
                loader: \'art-template-loader\',
            }, {
                test: /\\.jpg$/,
                loader: \'url-loader?mimetype=image/jpg\'
            }, {
                test: /\\.png$/,
                loader: \'url-loader?mimetype=image/png\'
            },
            {
                test: /\\.svg/,
                loader: \'url-loader?mimetype=image/svg+ \'
            }

 

6.server的启用

\" s\": {
    \"start\": \"webpack-dev-server --mode development --open\",
    \"build\": \"webpack --mode production\"
}

 

7.开启source-map

devtool: \"inline-source-map\" //详细到打包前的每个没被压缩的文件
or
devtool: \"source-map\" //打包后的未压缩文件

 

8.配置eslint

8.1要使webpack支持eslint，就要要安装eslint-loader。

{
    test: /\\.js$/,
    loader: \'eslint-loader\',
    enforce: \"pre\",
    include: [path.resolve(__dirname, \'src\')], // 指定检查的目录
    options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
    formatter: require(\'eslint-friendly-formatter\') // 指定错误报告的格式规范，formatter默认是stylish，如果想用第三方的要另外安装
    }
}

8.2安装eslint，创建配置文件 \'.eslintrc.js\'

module.exports = {
    \'root\': true,
    \'plugins\': [
        \'html\'
    ],
    \'settings\': {
        \'html/html-extensions\': [\'.w \']
    },
    \'rules\': {
        \'newline-per-chained-call\': \'off\',
        \'eqeqeq\': \'off\',
        \'indent\': [\'error\', 4, { SwitchCase: 1 }],
        \'prefer-rest-params\': \'off\',
        \'prefer-template\': \'off\',
        \'array-callback-return\': \'off\',  // 暂时关闭
        \'prefer-const\': \'warn\',
       

        \'no-restricted-properties\': [2, {
            \' \': \'wx\',
            \'property\': \'navigateTo\',
            \'message\': \'Please use this.$goto!!!\'
        }]
    }
}

 

更多详细细节看文档：http://eslint.cn/docs/user-guide

production相关的一些配置

1、代码压缩，uglifyjs-webpack-plugin

new UglifyJsPlugin({
    test: /.js$|.jsx$/i,
    uglifyOptions: {
        compress: {
            pure_funcs: [\'console.log\', \'alert\']
        },
    },
})

 

2.提取公共模块

output: {
...
chunkFilename: \'[name].[chunkhash:8].js\'
},
...
optimization: {
    splitChunks: {
    cacheGroups: {
        vendor: {
            test: /[\\\\/]node_modules[\\\\/]/,
            name: \'common\',
            chunks: \'all\'
        }
    }
    }
}

 

详细参考：https://www.cnblogs.com/ufex/p/8758792.html

 

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章