由浅及深，从零配置 webpack

阅读量：652 次

发布时间：2019-03-15

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

Webpack 配置与优化指南

1. 安装 Webpack

安装 Webpack 的方式主要有两种：全局安装和项目本地安装。

全局安装

npm install webpack webpack-cli -g

本地安装

npm install webpack webpack-cli -D

指定版本

npm install webpack@4.25.0 webpack-cli -D

检查版本

npm info webpack

2. Webpack 基础配置

创建 webpack.config.js 文件：

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

打包命令

npx webpack -v

3. Webpack 核心概念

Loader

Loader 是 Webpack 用于处理文件类型的工具。常见 Loader 包括：

raw-loader：加载文件原始内容

file-loader：将文件输出到文件夹

url-loader：根据文件大小决定加载方式

style-loader：加载 CSS 文件

css-loader：处理 CSS 模块

sass-loader：处理 Sass 文件

postcss-loader：扩展 CSS 语法

Plugin

Plugin 可以扩展 Webpack 的功能，常见 Plugin 包括：

html-webpack-plugin：生成 HTML 文件

clean-webpack-plugin：清理打包目录

webpack-dev-server：启动开发服务器

mini-css-extract-plugin：提取 CSS 文件

4. 样式文件处理

安装相关 Loader：

npm install style-loader css-loader -D

配置 webpack.config.js：

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

5. Sass 文件处理

安装相关插件：

npm install sass-loader sass -D

配置 webpack.config.js：

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

6. 图片处理

安装 file-loader 或 url-loader：

npm install file-loader -D

配置 webpack.config.js：

module.exports = {  module: {    rules: [      {        test: /\.(jpg|png|gif)$/,        use: {          loader: 'file-loader',          options: {            outputPath: 'images/'          }        }      }    ]  }};

7. 开发环境优化

在 webpack.config.js 中添加开发环境配置：

module.exports = {  mode: "development",  devtool: 'cheap-module-eval-source-map',  devServer: {    contentBase: './dist',    open: true,    hot: true  }};

8. Tree Shaking

在 package.json 中添加 "sideEffects": false，以便 Webpack 在生产模式下删除无用代码。

9. 模块分割

在 webpack.config.js 中启用代码分割：

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

10. 按需加载

通过动态导入实现按需加载，优化初始加载时间。

11. 代码优化

使用 terser-webpack-plugin 和 mini-css-extract-plugin 进行代码压缩和 CSS 提取。

12. 浏览器缓存

使用 contenthash 配置，确保浏览器缓存机制正常工作。

13. 第三方库打包

在 webpack.config.js 中使用 externals 配置，避免将第三方库打包到主 bundle 中。

14. Progressive Web Application (PWA)

安装相关插件：

npm install workbox-webpack-plugin -D

配置 webpack.prod.js：

const WorkboxPlugin = require('workbox-webpack-plugin');module.exports = {  plugins: [    new WorkboxPlugin.GenerateSW({      clientsClaim: true,      skipWaiting: true    })  ]};

15. TypeScript 支持

安装必要的依赖：

npm install ts-loader @types/lodash -D

配置 tsconfig.json：

{  "compilerOptions": {    "target": "es5",    "module": "es6",    "allowJs": true,    "skipLibCheck": true,    "strict": true,    "forceConsistentCasingInFileNames": true,    "noEmit": true,    "esModuleInterop": true,    "moduleResolution": "node",    "resolveJsonModule": true  }}

16. 请求转发与路由

使用 historyApiFallback 配置，实现单页面应用路由。

17. ESLint 集成

安装相关依赖：

npm install eslint -D

配置 .eslintrc.js：

module.exports = {  env: {    browser: true,    es6: true  },  extends: [    'react-app'  ],  parserOptions: {    ecmaVersion: 'latest',    sourceType: 'module'  }};