其它配置和压缩

开发服务器和自动化

• 创建一个本地开发服务器，自动监听变化、打包构建并更新刷新浏览器
• 不会产生 dist 文件，打包结果暂时存在内存中

1. 安装依赖

npm i webpack-dev-server

2. 配置

webpack.config.js:

module.exports = {
  // ...
  // 开发服务器配置
  devServer: {
    host: "localhost", //启动服务器域名
    port: "3000", //启动服务器端口号
    open: true, //构建完成自动打开浏览器
  },
  //...
};

3. 运行

npx webpack serve

生产模式配置

1. 文件结构

├── webpack-test (项目根目录)
    ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录，除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)

2. 开发模式 webpack.dev.js

• 开发环境不输出 dist 文件，打包结果缓存在内存中;
• 文件目录发生变化，用到绝对路径的地方按需调整

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, //开发模式没有输出，不需要指定输出目录
    filename: "static/js/main.js",
  },
  module: {
    rules: [
      /* 代码省略 */
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  mode: "development",
  devServer: {
    host: "localhost",
    port: "3000",
    open: true,
  },
};

3. 生产模式 webpack.prod.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const EslintWebpackPlugin = requrie("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/main.js",
    clean: true,
  },
  module: {
    rules: [
      /* 代码省略 */
    ],
  },

  plugins: [
    new EslintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      template: path.reslove(__dirname, "../public/index.html"),
    }),
  ],
  mode: "production",
};

4. 配置运行指令

package.json:

{
  // ...
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

css 优化压缩

一、提取 css 成单独文件

目前 css 文件被打包到 js 文件中，当 js 文件加载时，会创建 style 标签来生成样式； 用户浏览会产生闪屏现象，需要提取单独的 css 文件通过 link 标签加载以提升性能

1. 安装依赖

   npm i mini-css-extract-plugin -D

2. 配置

webpack.prod.js:

const MiniCssExtractPlugin = requrie("mini-css-extract-plugin");

module.exports = {
  //...
  module: {
    rules: [
      // 其余省略...
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  // 提取css成单独文件
  plugins: [
    new MiniCssExtractPlugin({
      // 定义输出目录和文件名
      filename: "static/css/main.css",
    }),
  ],
  // ...
};

二、css 兼容性处理

1. 安装依赖

   npm i postcss-loader postcss postcss-preset-env -D

2. 配置

webpack.prod.js:

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", //处理绝大多数兼容问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      // 其余略...
    ],
  },
  // ...
};

3. 控制兼容性

browserslist 文档

package.json ：

{
  //...
  "browserlist": ["last 2 version", "> 1%", "not dead"]
}

4. 合并配置

抽取 css 配置的共用代码封装成函数，webpack.prod.js :

const MiniCssExtractPlugin = requrie("mini-css-extract-plugin");

// 统一封装样式处理loader
const handleStyleLoaders = () => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", //处理绝大多数兼容问题
          ],
        },
      },
    },
  ];
};
module.exports = {
  //...
  module: {
    rules: [
      // 其余省略...
      {
        test: /\.css$/,
        use: [...handleStyleLoaders()],
      },
      {
        test: /\.less$/,
        use: [...handleStyleLoaders(), "less-loader"],
      },
    ],
  },
  // 提取css成单独文件
  plugins: [
    new MiniCssExtractPlugin({
      // 定义输出目录和文件名
      filename: "static/css/main.css",
    }),
  ],
  // ...
};

三、css 压缩

1. 安装依赖

   npm i css-minimizer-webpack-plugin -D

2. 配置

webpack.prod.js :

const CssMinimizierPlugin = requrie("css-minimizer-webpack-plugin");
module.exports = {
  //...
  plugins: [
    // css代码压缩
    new CssMinimizierPlugin(),
  ],
  //...
};