webpack修改默认打包配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    // entry: 配置打包入口文件地址
    entry: './src/index.js',
    // output: 配置打包出口文件
    output: {
        // 打包出口文件的绝对路径
        path: path.resolve(__dirname, 'build'),
        // 打包出口的文件名
        filename: 'index.js'
    },
    // 打包模式
    mode: 'development', // production
    // 配置loaders
    module: {
        rules: [
            // 打包 css
            {
                // 配置当前打包规则要匹配的文件名
                test: /\.css$/i,
                // exclude: 配置不需要解析的文件
                exclude: /node_modules/,
                // 用于配置当前打包规则所使用的loader
                use: [MiniCssExtractPlugin.loader, 'css-loader'] // MiniCssExtractPlugin 替换 'style-loader'
                // 下载命令: npm i style-loader css-loader -D
            },
            // 打包 less
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] // MiniCssExtractPlugin 替换 'style-loader'
                // 下载命令: npm i less less-loader -D
            },
        ]
    },
    // 插件配置
    plugins: [
        // 自动引入 下载 npm i html-webpack-plugin -D
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        // 删除没用的文件 下载 npm i clean-webpack-plugin -D
        new CleanWebpackPlugin(),
        // 单独的css文件 npm i mini-css-extract-plugin -D
        new MiniCssExtractPlugin({
            filename: './css/style.css' // 打包之后的路径文件名
        }), // 可传参数
    ],
    // 开发过程中服务器的配置
    devServer: {
        // 下载 npm i webpack-dev-server -D
        open: true, // 自动打开浏览器
        hot: true, // 热更新
        //host:
    }
}

package.json 配置启动命令

npm run dev 命令启动服务器

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "webpack-dev-server"
  },

可能会报错 cannot find module 'webpack-cli/bin/config-yargs'

该报错原因在于 webpack-cli 的版本与 webpack-dev-server 版本冲突，需要将 webpack-cli 版本降低

npm unistall webpack-cli
npm i webpack-cli@3 -D