webpack的配置

小陆不会敲代码

已于 2024-09-05 14:29:47 修改

阅读量3.3k

点赞数 48

分类专栏： Webpack 文章标签：笔记 webpack 前端 javascript vue.js

于 2024-09-05 14:26:45 首次发布

本文链接：https://blog.csdn.net/qq_48076747/article/details/141929307

版权

Webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

Webpack的配置详解

一、Webpack是什么？

Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。它主要用于将JavaScript文件及其依赖打包成一个或多个bundle文件，以便在浏览器中加载。

二、使用步骤

1.初始化项目

创建一个node环境的文件夹，执行命令
代码如下（示例）：

yarn init -y  或者 npm init

2.安装Webpack

–save-dev参数表示将webpack和webpack-cli安装为开发依赖。

npm install webpack webpack-cli --save-dev

3.创建项目文件

在项目中创建src目录，然后编写代码（index.js）

4.配置Webpack

Webpack的配置通常通过一个名为webpack.config.js的文件来完成。在项目根目录下创建这个文件，并添加基本的配置信息，如入口文件（entry）和输出文件（output）

const path = require('path');  
  
module.exports = {  
  mode: 'development',  // 开发模式  
  entry: './src/index.js',  // 入口文件  
  output: {  
    filename: 'bundle.js',  // 输出文件名  
    path: path.resolve(__dirname, 'dist'),  // 输出目录  
  },  
};

5. 打包项目

配置好Webpack后，可以通过在package.json文件的scripts部分添加一个脚本来运行Webpack打包命令。
例如：package.json文件中进行添加

"scripts": {  
  "build": "webpack --mode development"  
}

6.执行命令

npm run build

三、webpack的其他配置选项

1. 加载器（Loaders）

Webpack 本身只理解 JavaScript，但通过使用加载器（Loaders），Webpack 能够处理其他类型的文件，如 CSS、图片、字体文件等。加载器可以将这些非 JavaScript 文件转换为 Webpack 能够处理的模块。

CSS Loader：用于将 CSS 文件转换为 CommonJS 模块，从而可以在 JavaScript 中引入 CSS。
Style Loader：将 CSS 注入到 DOM 中的 style 标签内。
File Loader：用于将文件发送到输出目录，并返回（相对）URL。
URL Loader：类似于 file loader，但如果文件小于限制，则可以返回一个 DataURL。

安装和配置样式加载器（style-loader和css-loader）示例：

npm install --save-dev style-loader css-loader

配置示例：

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

2. 插件（Plugins）

Webpack 的插件系统非常强大，可以用于执行范围广泛的任务，如打包优化、资源管理和环境变量注入等。

HtmlWebpackPlugin：自动创建 HTML5 文件，并自动将打包后的 JavaScript 文件注入到这些文件中。
CleanWebpackPlugin：在每次构建前清理/dist文件夹，确保每次构建都是最新的。
MiniCssExtractPlugin：将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件。

安装和配置HtmlWebpackPlugin示例：

npm install --save-dev html-webpack-plugin

配置示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');  
 
module.exports = {  
 plugins: [  
   new HtmlWebpackPlugin({  
     template: './src/index.html'  
   })  
 ]  
};

3. 开发服务器（DevServer）

Webpack DevServer 是一个小型的 Express 服务器，用于为 Webpack 打包的应用提供实时重新加载（live reloading）功能。

自动编译和打包。
自动刷新浏览器以显示最新的更改。
提供了一个简单的 web 服务器和实时重新加载功能。

安装和配置HtmlWebpackPlugin示例：

npm install --save-dev webpack-dev-server

配置示例：

module.exports = {  
 devServer: {  
   static: {  
     directory: path.join(__dirname, 'public'),  
   },  
   compress: true,  
   port: 9000,  
 },  
};