webpack配置css兼容性和压缩

第一步：需要安装 postcss ， postcss-loader 和 postcss-preset-env 三个包。

第二步：在 webpack.config.js 的 css 的 loader 里配置 postcss-loader 。

第三步：配置 postcss.config.js ，然后配置 postcss-preset-env 插件，用来读取 package.json 文件中的 browserslist 配置。

第四步：在 package.json 文件添加 browserslist ，配置需要支持哪些浏览器。

压缩 css 需要用到 optimize-css-assets-webpack-plugin 。

用法很简单，引入插件之后，在 plugins 中实例化即可。

mode

    webpack根据不同的mode值会进行不同的内置优化，可选的值为：'none' | 'development' | 'production'，一般会提供两个配置文件一个指定development一个则指定production

entry

    该配置指定webpack的构建入口

        可以指定多入口

         可以将多入口的共有依赖提取

         也可以通过函数形式生成动态入口

output

    指定打包后的输出目录

     filename：导出的文件名称，可以不指定，默认以文件名作打包输出名称，多入口时一般如下。也可以组合使用

        也可以是一个函数

     path：指定导出的文件目录，没有时会自己创建，默认为dist

     clean:打包之前清空output目录，可配置指定清空（webpack5之前一般借助CleanWebpackPlugin实现）

     compareBeforeEmit:对比是否需要打包输出未改变的文件

     assetModuleFilename：静态文件的输出目录，需要在静态文件处理的loader中设置

loader

    按 文件类型 进行预处理,一般是做转换处理。如我们直接在文件中引入css文件时，webpack打包会出错，因为webpack默认只认识js文件。需要使用css-loader去识别转换并利用style-loader将样式信息挂载到head的style标签上

     安装loader

        cnpm i--save-dev style-loader css-loader (需要用yarn安装，npm或cnpm报错)

     使用

plugin

    提供某一项功能，如我们之前配置了多入口，需要每次在html中进行手动的引入。当我们在output中指定clean为true时，每次就都需要手动再添加一份index.html文件。此时我们就可以借助plugin在帮我们完成这件事

     安装插件

        cnpm i html-webpack-plugin  --save-dev

     使用

首先是安装对应的预编译器和加载器

然后去webpack.config.js的module中去配置

开发（dev）环境下

生产（prod）环境下

先安装

这个插件主要是让css文件单独打包引入到页面中。在配置文件中引入

在配置的plugins下添加

在配置文件的module下添加

到这里就引入完成了

如果html中引入需要在style标签中添加lang="stylus"

---