本文目录一览：

1、webpack的配置文件
2、[webpack4 配置之 postcss-loader](#webpack4 配置之 postcss-loader)
3、webpack的打包配置-1修改版
4、webpack简单配置，路由配置，接口拦截配置，基本文件配置
5、webpack配置
6、使用webpack4从0开始打包一个antd项目

webpack的配置文件

webpack 的默认配置文件是 webpack.config.js，所以在我们的项目根目录下（如 02webpack-demo）新建一个 webpack.config.js 文件，里面可以先不写内容。此时在终端中运行 npx webpack，就会在根目录下生成一个 dist 文件夹，里面有一个 main.js，这是 webpack 利用默认配置生成的打包文件。配置好文件后，再次运行 npx webpack，这时在项目目录下生成一个 bundle 文件夹，里面有一个 bundle.js，这是 webpack 打包后的文件。在 demo.html 中引入 bundle.js，在浏览器中打开 demo.html，可以看到控制台输出了我们期望的内容。我们知道 webpack 的默认配置文件是 webpack.config.js，但也可以修改这个文件名。例如，如果想改为 test.js，可以在打包时运行：

npx webpack --config test.js

为了简化操作，可以在 package.json 的 scripts 中配置一个脚本命令，例如：

"scripts": {
  "bundle": "webpack"
}

然后在终端中运行：

npm run bundle

webpack 会根据配置自动打包文件。

webpack4 配置之 postcss-loader

postcss-loader 是一个常用的 loader，用于进一步处理 CSS 文件，如添加浏览器前缀、压缩 CSS ://

1. 添加 browserslist

方法一：在项目根目录添加 .browserslistrc 文件。
方法二：在 package.json 中添加 browserslist 字段。

2. 配置 autoprefixer

方法一：创建 postcss.config.js 文件（推荐）。
方法二：在 webpack.config.js 中直接配置。

3. 使用方式

使用 style-loader：将 CSS 注入到 DOM 中。
使用 MiniCssExtractPlugin：将 CSS 提取为单独的文件。

webpack的打包配置-1修改版

1. 创建项目目录

在本地创建项目目录，然后在 index.html 中写入 HTML 结构。

2. 安装 jQuery

运行以下命令初始化项目并安装 jQuery：

npm init -y
npm install jquery -S

在 index.html 中引入 main.js。

3. 编写 main.js

在 main.js 中写入如下内容：

import $ from 'jquery';
console.log('Hello jQuery');

使用 webpack 打包：

webpack ./src/main.js ./dist/bundle.js

每次打包都需要手动输入命令，为了简化操作，可以在项目根目录创建 webpack.config.js 文件，配置入口和出口路径。

4. 使用 webpack-dev-server 实现自动打包编译

安装 webpack-dev-server：

npm install webpack-dev-server -D

在 package.json 中配置 dev 脚本：

"scripts": {
  "dev": "webpack-dev-server"
}

运行：

npm run dev

此时打包生成的 `bundle.js` 是虚拟文件，不会写入磁盘，需要在 `index.html` 中引入 `/bundle.js`。

webpack简单配置，路由配置，接口拦截配置，基本文件配置

项目结构

project/
├── src/
│   ├── assets/           # 静态资源
│   ├── api/              # 接口处理
│   ├── utils/            # 工具函数
│   ├── modules/          # 页面模块
│   ├── store/            # 状态管理
│   ├── routers.js        # 路由配置
│   ├── index.js          # 入口文件
│   └── index.html        # HTML 模板
├── public/               # 公共资源
├── dist/                 # 打包输出目录
├── webpack.config.js     # webpack 配置文件
├── package.json          # 项目配置
└── .babelrc              # Babel 配置

webpack.config.js 配置示例

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main_[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.json', '.jsx']
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
});

接口拦截配置

使用 axios 拦截请求：

import axios from 'axios';
axios.interceptors.request.use(config => {
  config.headers.token = 'your-token';
  return config;
}, error => {
  return Promise.reject(error);
});
axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // token 失效，跳转登录页
  }
  return Promise.reject(error);
});

webpack配置

安装 Webpack

npm install --save-dev webpack
npm install webpack webpack-cli --save-dev

默认行为

入口：src/index.js
输出：dist/main.js
默认压缩和优化

自定义配置

创建 webpack.config.js 文件，webpack 会自动读取该文件。

常用配置项

mode: "development" | "production" | "none"
entry: 入口文件
output: 输出配置
module: loader 配置
plugins: 插件配置
resolve: 模块解析配置

使用webpack4从0开始打包一个antd项目

初始化项目

mkdir project
cd project
npm init -y

安装 Webpack 及相关依赖

npm install -D webpack webpack-dev-server webpack-cli

创建入口文件

在 src/index.js 中写入：

console.log('Hello Webpack');

运行：

npx webpack

会自动生成 dist/main.js。

配置 webpack.config.js

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

安装 html-webpack-plugin

npm install -D html-webpack-plugin

配置：

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

安装样式相关 loader

npm install -D style-loader css-loader less-loader file-loader url-loader

安装 React 及 Babel

npm install -S react react-dom
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

配置 .babelrc：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

安装 Ant Design

npm install -S antd

引入样式：

import 'antd/dist/antd.css';

按需加载配置：

npm install -D babel-plugin-import