webpack打包7之webpack-dev-server开发版配置

我们不能每次写一次代码就要打包一次看一次效果，为了我们开发方便需要配置一下开发环境，让页面实时刷新，每改一次代码，页面也会跟着刷新，不需要在打包看效果。为了开发效率更快，
1、安装

yarn add webpack-dev-server -D

2、安装完之后配置启动脚本如下

  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },

3、启动

yarn start

以服务器的方式启动，此时保存代码时自动刷新页面。
4、其他配置

  //配置开发服务器
    devServer:{
        port:3000,//配置端口号
        open:true,//自动打开浏览器

    }

5、以上就是一些基本的webpack的配置

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");// CSS 提取到单独的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');// 清除打包文件

//配置文件，导出配置对象供webpack使用
module.exports = {
    //1、入口，从那个文件开始打包
    entry: './src/main.js',
    //2、出口对象
    output: {
        path: path.join(__dirname, 'dist'),//打包到哪里去,打包路径 注意输出路径必须是绝对路径
        filename: 'js/bundles.js'//打包后生成的文件名

    },
    //3、模式mode development开发模式未压缩， production生产模式压缩
    mode: 'development',

    //4、配置loader加载器
    module: {
        rules: [
            {//配置css
                test: /\.css$/i,  //匹配所有.css文件
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader",

                ],//先加载后面loader
            },
            {//配置less
                test: /\.less$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    'css-loader',
                    'less-loader',
                ],
            },
            {//配置图片
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 3 * 1024,
                            //输出文件名和后缀名
                            name: '[name].[ext]',
                            //配置静态资源引用路径，方便css找图片资源的路径
                            publicPath: '../images',
                            //配置输出的文件路径，会在dist文件下新增一个images文件夹
                            outputPath: 'images/'
                        }
                    }
                ]
            },
            {//配置babel
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ],
    },


    //5、配置插件一般放到最后
    plugins: [
        //自动生成html插件
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
        //分离css文件
        new MiniCssExtractPlugin({
            filename: "css/index.css",
        }),
        //清除dist文件
        new CleanWebpackPlugin()
    ],

    //配置开发服务器
    devServer:{
        port:3000,//配置端口号
        open:true,//自动打开浏览器

    }

}