踏上 Vue3 与 Webpack 的奇幻旅程（六）: 无忧无虑的 Webpack 基础环境配置Vue3与Webpack的基本打包环境配置（六）: 稳扎稳打，无忧无虑

关键词：

正文

基础配置之入口和输出

前端项目的代码往往会被分散到多个文件中，比如 src 目录下分别有 app.js, main.js, componentA.js 等。Webpack 在进行打包时，需要一个入口文件来作为打包的起始点。入口文件可以是单个文件，也可以是多个文件。
输出配置是指定打包后的文件输出的目录和文件名。它主要包含 output.path 和 output.filename 两个属性，其中 path 是输出目录的路径，filename 是输出文件的名称。

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  }
};

快乐加载器

在 Webpack 中，加载器用于解析和转换不同的模块。比如，我们需要将 JavaScript 代码转换成浏览器可以运行的代码，这就需要用到 babel-loader 这个加载器。而对于样式文件，则需要使用 style-loader 和 css-loader 两个加载器。
加载器一般是通过规则（rule）来配置的。规则包含了要处理的文件类型、使用的加载器以及加载器的配置。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }
};

插件小帮手

在 Webpack 中，插件可以用于扩展 Webpack 的功能。比如，可以帮助我们在打包时压缩 JavaScript 代码，或者提取 CSS 代码到单独的文件中。
插件的使用也是通过配置来实现的。我们可以通过 plugins 属性来配置要使用的插件。

module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true,
        },
      },
    }),
    new ExtractTextPlugin({
      filename: 'styles.css',
    }),
  ]
};

代码分割

在大型项目中，打包后的代码文件往往会非常大，这会影响页面的加载速度。为了解决这个问题，我们可以使用代码分割来将代码文件拆分成更小的块。Webpack 中提供了多种方式来实现代码分割，其中最常用的是通过 import() 函数来动态加载代码。
import() 函数可以将一个模块标记为异步加载。当我们使用 import() 函数来导入一个模块时，Webpack 就会将这个模块打包成一个单独的文件，并在需要的时候再加载它。

// app.js
import('./moduleA').then(({ moduleA }) => {
  // 使用 moduleA
});

// moduleA.js
export const moduleA = 'Module A';

至此，Webpack 的基础环境配置就介绍完了。这些配置是构建任何一个 Webpack 项目的基础，在后续的章节中，我们会继续深入探究 Webpack 的更多特性，帮助你构建出更加强大的前端项目。