Webpack教程：如何从头开始设置 webpack 5

阅读量：557 次

发布时间：2019-03-09

本文共 3520 字，大约阅读时间需要 11 分钟。

Webpack 实用指南

Webpack 是现代前端开发中不可或缺的工具，它能够将复杂的项目打包成高效的 bundles。以下是使用 Webpack 的实用指南，涵盖从安装到高级配置的全过程。

1. 安装

首先，创建一个项目目录并初始化包.json：

mkdir webpack-tutorialcd webpack-tutorialnpm init -y

安装必要的依赖项：

npm install -D webpack webpack-cli html-webpack-plugin clean-webpack-plugin sass-loader postcss-loader style-loader babel-loader

创建 src 目录并添加 index.js 文件：

// src/index.jsconsole.log('Interesting!');

创建 webpack 配置文件：

// webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {  entry: {    main: path.resolve(__dirname, './src/index.js'),  },  output: {    path: path.resolve(__dirname, './dist'),    filename: '[name].bundle.js',  },  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: 'babel-loader',      },    ],  },  plugins: [    new HtmlWebpackPlugin({      title: 'Webpack Boilerplate',      template: path.resolve(__dirname, './src/template.html'),      filename: 'index.html',    }),    new CleanWebpackPlugin(),  ],};

2. 基本配置

Entry

entry 配置指定了 Webpack 从哪里开始打包。例如：

entry: {  main: path.resolve(__dirname, './src/index.js'),},

Output

output 配置定义了打包后的文件路径和文件名。例如：

output: {  path: path.resolve(__dirname, './dist'),  filename: '[name].bundle.js',},

在 package.json 中添加构建脚本：

{  "scripts": {    "build": "webpack"  }}

运行构建命令：

npm run build

3. 插件

Webpack 提供了强大的插件系统，可以扩展其功能。常用的插件包括：

html-webpack-plugin：自动生成 HTML 模板

clean-webpack-plugin：清理构建目录

sass-loader：处理 SCSS 文件

babel-loader：将现代 JavaScript 转换为浏览器支持的格式

4. HTML 模板

创建或修改 src/template.html：

  
     
     <%= htmlWebpackPlugin.options.title %>

在 webpack.config.js 中添加 HTML 插件配置：

plugins: [  new HtmlWebpackPlugin({    title: 'Webpack Boilerplate',    template: path.resolve(__dirname, './src/template.html'),    filename: 'index.html',  }),  new CleanWebpackPlugin(),],

5. 模块加载

Webpack 可以处理多种文件类型。例如：

JavaScript：使用 babel-loader

CSS 和 SCSS：使用 sass-loader 和 css-loader

图像：使用 asset/resource

字体和 SVG：使用 asset/inline

在 webpack.config.js 中添加样式处理规则：

module: {  rules: [    {      test: /\.js$/,      exclude: /node_modules/,      use: 'babel-loader',    },    {      test: /\.(scss|css)$/,      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],    },    {      test: /\.(ico|gif|png|jpg|jpeg)$/,      type: 'asset/resource',    },    {      test: /\.(woff(2)?|eot|ttf|otf|svg)/,      type: 'asset/inline',    },  ],},

6. 开发服务器

为了提升开发效率，使用 webpack-dev-server：

安装依赖项：

npm install -D webpack-dev-server

修改 package.json：

{  "scripts": {    "start": "webpack serve"  }}

在 webpack.config.js 中启用开发模式：

module.exports = {  mode: 'development',  devServer: {    historyApiFallback: true,    contentBase: path.resolve(__dirname, './dist'),    open: true,    compress: true,    hot: true,    port: 8080,  },  plugins: [    new webpack.HotModuleReplacementPlugin(),  ],};

运行开发服务器：

npm start

7. 高级配置

模块分隔

使用 webpack-merge 合并不同环境的配置：

安装依赖项：

npm install -D webpack-merge

创建不同的配置文件：

// webpack/prod.config.jsconst baseConfig = require('./webpack.config.js');module.exports = merge(baseConfig, {  mode: 'production',  output: {    filename: '[name].min.js',  },});

// webpack/dev.config.jsconst baseConfig = require('./webpack.config.js');module.exports = merge(baseConfig, {  mode: 'development',  devServer: {    // 开发服务器配置  },});