webpack\webpack-cli\webpack-dev-server的配置使用

关于配置package.json的配置

{
    
    
  "name": "03-webpack-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    
    
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve"
  },
  "devDependencies": {
    
    
    "cross-env": "7.0.3",
    "css-loader": "5.0.1",
    "file-loader": "6.2.0",
    "html-loader": "1.3.2",
    "html-webpack-plugin": "4.5.0",
    "less": "3.12.2",
    "less-loader": "7.1.0",
    "mini-css-extract-plugin": "2.4.2",
    "optimize-css-assets-webpack-plugin": "6.0.1",
    "style-loader": "2.0.0",
    "url-loader": "4.1.1",
    "webpack": "5.12.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.9.1"
  }
}

关于webpack.config.js的配置

const path = require('path');
// 引入html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入提取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//引入 优先css的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    
    

    // 入口
    entry: {
    
    
        ad: "./src/pages/ad/ad.js",
        index: "./src/pages/index/index.js",
    },
    // 出口
    output: {
    
    
        // 公共的文件输出路径
        publicPath: "./",
        filename: "js/[name].js",
    },
    // 加载器
    module: {
    
    
        // 加载器的规则
        rules: [
            // css加载器
            {
    
    
                test: /\.css$/, use: [{
    
    
                    loader: MiniCssExtractPlugin.loader,
                    options: {
    
    
                        publicPath: "../"
                    }
                }, "css-loader"]
            },
            // less加载器
            {
    
    
                test: /\.less$/, use: [{
    
    
                    loader: MiniCssExtractPlugin.loader,
                    options: {
    
    
                        publicPath: "../"
                    }
                }, "css-loader", "less-loader"]
            },
            // css中引用图片的加载器
            {
    
    
                test: /\.(jpg|jpeg|webp|gif|svg|png)$/,
                use: [{
    
    
                    loader: "url-loader",
                    options: {
    
    
                        limit: 10 * 1024,
                        name: "[hash:16].[ext]",
                        outputPath: "imgs",
                        esModule: false, //禁用es6的模块化
                    }
                }]
            },
            // html页面中的图片加载器
            {
    
     test: /\.html$/, use: ["html-loader"] },
            // 加载iconfont字体图标
            {
    
    
                test: /\.(ttf|woff|woff2|eot|svg)$/i, use: [{
    
    
                    loader: 'file-loader',
                    options: {
    
    
                        name: '[hash:16].[ext]', //设置字体图标文件的文件名
                        outputPath: 'fonts', //设置字体图标文件的打包文件夹
                    }
                }]
            }

        ]
    },

    // 插件
    plugins: [
        // html打包插件
        new HtmlWebpackPlugin({
    
    
            template: './src/pages/ad/ad.html',
            filename: "ad.html",
            chunks: ["ad"]
        }),
        // html打包插件
        new HtmlWebpackPlugin({
    
    
            template: './src/pages/index/index.html',
            filename: "index.html",
            chunks: ["index"]
        }),
        //提取css文件的插件
        new MiniCssExtractPlugin({
    
    
            filename: 'css/[name].css',
        }),
        // 优化css的插件
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    // 模式
    mode: process.env.NODE_ENV,

    devServer: {
    
    
        static: {
    
      // 静态资源默认路径
            directory: path.join(__dirname, 'dist'),
        },
        compress: true, // 启用gzip压缩
        port: 8080,  // 端口
        open: true, // 自动打开服务
        hot: true, // 热加载
        devMiddleware: {
    
      // 用于检测文件更改自动打包，并刷新页面
            index: true,
            mimeTypes: {
    
     phtml: 'text/html' },
            publicPath: '/publicPathForDevServe',
            serverSideRender: true,
            writeToDisk: true,
        },
    },
    target: 'web', // 目标是浏览器
}

特别说明

在更新到 webpack 5.12.0 ，webpack-cli: 4.10.0 ， webpack-dev-server: 4.9.1 关于devServer的配置有新的变化，以前的一些配置用不了， 详细配置可以参考https://webpack.js.org/configuration/dev-server/#devserverlivereload