webpack手动配置最佳实践

前端

2023-10-20 05:26:48

前言

webpack 是一款功能强大的构建工具，它可以帮助您将各种类型的资源（如 JavaScript、CSS、图像等）打包成一个或多个可供浏览器使用的文件。webpack 具有丰富的功能和灵活的配置选项，可以满足各种项目的构建需求。

手动配置 webpack 可以让您充分了解 webpack 的工作原理，并针对项目的需求进行定制化配置。虽然手动配置需要一定的学习和实践，但它可以帮助您更好地掌控构建过程，优化构建性能，并解决各种疑难杂症。

准备工作

在开始手动配置 webpack 之前，您需要确保已经安装了以下工具：

Node.js
npm
webpack
webpack-cli

您可以通过以下命令安装这些工具：

npm install -g nodejs
npm install -g npm
npm install -g webpack
npm install -g webpack-cli

创建项目

接下来，创建一个新的项目目录，并进入该目录：

mkdir my-project
cd my-project

在项目目录中，创建一个名为 package.json 的文件，并添加以下内容：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My webpack project",
  "author": "Your Name",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^4.0.0"
  }
}

配置 webpack

现在，您需要创建一个 webpack 配置文件。在项目目录中，创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',

  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  // 加载器
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

  // 插件
  plugins: [
    // 编译时提供带注释的可读sourceMap文件
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map'
    })
  ],

  // 开发环境配置
  devServer: {
    contentBase: './dist',
    port: 8080,
    open: true
  }
};