【笔记】Webpack打包JS文件

发表于 更新于 阅读次数：

前言

Webpack打包JS文件

直接打包JS代码

  • 默认即可直接打包JS代码

通过Babel将JS代码转换后再打包

预设开发环境

下载依赖

  • babel-loader包含@babel/core，无需重复引入
1
npm install -D babel-loader @babel/preset-env

修改配置文件

全部写在Webpack配置文件内
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env"
              ],
              plugins: []
            }
          }
        ]
      }
    ]
  }
}
写在单独的Babel配置文件内
babel.config.js
1
2
3
4
5
6
module.exports = {
  presets: [
    "@babel/preset-env"
  ],
  plugins: []
}

完成