webpack基本配置

最新推荐文章于 2025-11-24 17:58:44 发布

原创最新推荐文章于 2025-11-24 17:58:44 发布 · 293 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #node.js

工程化专栏收录该内容

2 篇文章

订阅专栏

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，它能够将项目中的所有模块（包括JavaScript、图片、CSS等）打包成一个或多个bundle。以下是Webpack配置的一些关键点详解：

1. 安装Webpack

首先，需要在项目中安装Webpack及其命令行工具：

npm install webpack webpack-cli --save-dev

2. 创建Webpack配置文件

在项目根目录下创建webpack.config.js文件，这是Webpack的配置文件，用于定义构建过程的各种选项。

3. 配置入口文件（Entry）

入口起点是Webpack开始打包的地方，可以是单入口或多入口：

// 单入口
module.exports = {
  entry: './src/app.js'
}

// 多入口
module.exports = {
  entry: {
    main: './src/app.js',
    another: './src/another-module.js'
  }
}

4. 配置输出文件（Output）

输出属性指定了打包后的文件将如何被写入到磁盘上：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

5. 配置模块加载器（Loaders）

Loaders 允许Webpack处理非JavaScript文件，例如将CSS、图片等资源转换为模块：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg)$/,
        use: ['file-loader']
      }
    ]
  }
}

6. 配置插件（Plugins）

插件可以用于执行更广泛的任务，如生成HTML文件、环境变量注入等：

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

7. 配置开发服务器（DevServer）

Webpack DevServer可以在本地启动一个服务，实现自动打包和刷新浏览器：

module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true
  }
}

8. 配置环境变量

通过DefinePlugin插件，可以注入环境变量：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ]
}

9. 配置代码分离

使用SplitChunksPlugin插件，可以将代码分离成多个chunk，实现按需加载：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

10. 配置文件路径解析（Resolve）

通过resolve配置，可以设置模块如何被解析：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  }
}

这些是Webpack配置的一些基本和常用的选项，通过这些配置，可以根据项目需求进行个性化设置，优化打包过程和最终的输出结果。