webpack 及其使用 | 易学教程

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。

初始化项目

npm init -y
npm install webpack webpack-cli -D

打包成低版本插件

npm install babel-loader -D

配置babel 安装依赖插件

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3

新建 webpack.config.js，如下:

//webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: ['babel-loader'],
                exclude: /node_modules/ //排除 node_modules 目录 提升编辑效率
            }
        ]
    }
}

这里，我们可以在 .babelrc 中编写 babel 的配置，也可以在 webpack.config.js 中进行配置

创建一个 .babelrc 单独配置babel
配置如下：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

在webpack中配置 babel

//webpack.config.js
module.exports = {
    // mode: 'development',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "corejs": 3
                                }
                            ]
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

将 mode 增加到 webpack.config.js 中:

module.exports = {
    //....
    mode: "development",
    module: {
        //...
    }
}

mode 配置项，告知 webpack 使用相应模式的内置优化。

mode 配置项，支持以下两个配置:

development：
将 process.env.NODE_ENV 的值设置为 development，
启用 NamedChunksPlugin 和 NamedModulesPlugin

production：
将 process.env.NODE_ENV 的值设置为 production，
启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,
OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

现在，我们直接使用 npx webpack 进行编译即可。

来源：CSDN

作者：前端开发程序员

链接：https://blog.csdn.net/weixin_44403301/article/details/104750337

标签

Webpack

babel

config