Webpack与Babel基本配置

此次我们通过一个demo来记录一下webpack和babel应该如何来配置

先创建好项目文件夹

Webpack核心配置

入口(entry)
输出(output)
loader
插件(plugins)

入口(entry)

entry 是(entry point 的简写)，它是我们用 Webpack 打包项目的起始点（入口文件）。Webpack 通过配置entry 属性，来指定一个入口起点（或多个入口起点）。进入入口起点后，Webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

在创建好的 webpack.confifig.js 中配置 entry，例如：

const path = require('path')

module.exports = {
  // mode 可选 development 或 production ，默认为后者
  // production 会默认压缩代码并进行其他优化（如 tree shaking）
  mode: 'development',
  // __dirname表示当前文件所在路径；
  entry: path.join(__dirname, 'src', 'index'),
}

出口(output)

output 属性与 entry 相对应，它告诉 webpack在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

module.exports = {
  output: {
    // output.filename 表示打包后的文件名，output.path 表示打包后的文件输出路径。
    filename: 'bundle.[contenthash].js',
    path: path.join(__dirname, 'dist')
  },
}

loader

loader 可以将所有类型的文件转换为 Webpack 能够处理的有效模块，然后你就可以利用 Webpack 的打包能力，对它们进行处理。

test 和 use 是 Webpack 配置中 loader 的两个核心属性，test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。use 属性，表示进行转换时，应该使用哪个 loader。

module: {
  rules: [
    // 定义一条规则, 匹配到的js文件用babel-loader编译
    {
      test: /\.js$/,
      // use 支持String|Array|Object三种数据类型
      use: ['babel-loader'],
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/
    },
  ]
},

与之对应babel需要新建.babelrc文件进行配置

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

plugins: [
  new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src', 'index.html'),
    filename: 'index.html'
  })
],

运行效果

最后来放一下package.json和webpack.config.js全部代码

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // mode 可选 development 或 production ，默认为后者
    // production 会默认压缩代码并进行其他优化（如 tree shaking）
  mode: 'development',
  // __dirname表示当前文件所在路径；
  entry: path.join(__dirname, 'src', 'index'),
  output: {
    // output.filename 表示打包后的文件名，output.path 表示打包后的文件输出路径。
    filename: 'bundle.[contenthash].js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      // 定义一条规则, 匹配到的js文件用babel-loader编译
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),
      filename: 'index.html'
    })
  ],
  devServer: {
    port: 8080,
    open: true
  }
}

运行npm run build命令后可以看到生成dist文件