携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天juejin.cn/post/712312…

开发服务器&自动化

解释：就不需要改动某个文件之后，在输出npx webpack

下载包：npm i webpack-dev-r serve -D

// 开发服务器

devServer:{
        host:"localhost",//启动服务器域名
        port:"3000",//启动服务器端口号
        open:true,  //是否自动打开浏览器
    }

插件

MiniCssExtractPlugin

本插件会将CSS提取到单独的文件中，为每个包含css的JS文件创建一个CSS文件，并且支持CSS和SourceMaps的按需加载 下载包：npm install --save-dev mini-css-extract-plugin

记住：要引入插件 const MiniCssExtractPlugin=require（"mini-css-extract-plugin"）

## 做兼容性配置
{
    loader:"postcss-loader",
    options:{//给loader加的配置项
        postcssOptions:{
            plugins:[
                "postcss-preset-env",//能解决大多数兼容性问题，
            ]
        }
    }
}

写上以上代码段，但没有告诉浏览器具体做到什么样的程度，可在 package.json文件里添加如下配置：

    "ie >= 8"//就是要做到ie8及以上

    "browserslist":[

        "last 2 version",//只要各浏览器最新的两个版本
        "> 1%",//兼容性支持在99%
        "not dead"//有些在发展中已经死掉的不要了
        
        相当于用它们3各的交集，时机项目中就会写上面这样的
     ]

然后再去执行npm run build 即开发命令，就可以看大打包之后的css文件有一些兼容性不太好的样式就会加上相应的前缀。

CssMinimizerWebpackPlugin插件

说明：这个插件使用cssnano优化和压缩css。使打包过后的css代码变成一行

就向optimize-css-assets-webpack-plugin一样，但在source maps和assets中使用查询字符串会更加准确，支持缓存和并发模式运行。

下载包：npm install css-minimizer-webpack-plugin --save-dev

基础总结

1. 两种开发模式

• 开发模式：代码能编译自动化运行
• 生产模式：代码编译优化输出。

2. Webpack基本功能

• 开发模式：可以编译ES Module语法
• 生产模式：可以编译ES Module语法，压缩js代码

3. Webpack配置文件

• 5各核心概念

（1）entry 入口文件（打包路径）

（2）output 输出路径

（3）loader 各种loader，编译

（4）plugins 插件

（5）mode 模板

• devServe配置

4. Webpack脚本指令用法

• webpack直接打包输出
• webpack serve启动开发服务器，内存编译打包没有输出（即dist下没有文件）

在生产模式才有输出（dist文件夹下有打包后的各种文件）