【笔记】Webpack打包JS文件

发表于 更新于 阅读次数：

前言

Webpack打包JS文件

直接打包JS代码

  • 默认直接打包JS代码，无需额外配置

引入JS文件

index.js
1
2
3
4
5
const data = {};

module.exports = {
  data: data
};
1
2
3
const { data } = require("./index.js");

console.log(data); // {}

通过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: []
};

完成