webpack（二）devServer,构建环境,提取cs成单独文件,css兼容性处理，压缩css

1.devServer

开发服务器devServer,用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）,下载webpack-dev-sever

npm i webpack-dev-server -D

webpack.config.js主要配置

 //模式
    mode: "development",
    // mode:"production"
    //特点：只会在内存中编译打包，不会输出（build）
    //启动devServer指令为：npx webpack serve
    devServer: {
        //要运行的项目目录(构建后的目录）
        contentBase: resolve(__dirname, 'build'),
        //启动gzip压缩，让代码体积更小，从而速度更快
        compress: true,
        //开发服务器端口号
        port: 3000,
        //自动打开浏览器
        open: true,

    }

命令行终端输入 npx webpack serve ,然后就会自动监听src下面的代码变化，自动编译，打开浏览器看效果

2.提取css样式

目的：性能更好，兼容主流浏览器（因为要压缩代码，花费时间较长，不适合在开发环境处理，适合在生成环境处理）

下载插件,这个插件能够提取css成一个单独的js

npm i mini-css-extract-plugin -D

webpack.config,js 配置如下，然后执行webpack命令，会在build文件下生成css文件，打包后的css文件名叫built.css,build文件下的index.html会自动引入这个打包后生成的css资源。

const {resolve} = require('path');
const HtmlWebpack = require('html-webpack-plugin')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "built.js",
        path: resolve(__dirname, "build")
    },
    //loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    //创建style标签，将样式放入
                    // 'style-loader',
                    //这个loader取代style.loader,作用：提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader'

                ]
            },
        ]
    },
    //plugins的配置
    plugins: [
        //功能：默认会创建一个空的html文件，引入打包输出的所有资源
        //需求：需要一个有结构的html.
        new HtmlWebpack({
                //复制如下文件，并将它原本的功能并引入打包输出的所有资源
                template: "./src/index.html"
            }
        ),
        new MiniCssExtractPlugin({
            //对输出的文件进行重命名
            filename: 'css/built.css'
        })
    ],
    //模式
    mode: "development",
    // mode:"production"
}

3.css兼容性处理

css兼容性处理：postcss --->postcss-loader post-preset-env 这两个插件

npm i postcsss-loader postcss-preset-env -D

webpack.config.js主要配置

const {resolve} = require('path');
const HtmlWebpack = require('html-webpack-plugin')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
//设置node.js环境变量
process.env.Node_ENV="development"
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "built.js",
        path: resolve(__dirname, "build")
    },
    //loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    //创建style标签，将样式放入
                    // 'style-loader',
                    //这个loader取代style.loader,作用：提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // css兼容性处理
                   /* postcss-preset-env ：帮助postcss找到package.json中browserlist的配置，通过配置加载指定的css样式
                    "browserslist": {
                    开发环境 -> 设置node环境变量，process.env.Node_ENV=development
                          ">0.2%",
                          "not dead",
                          "not op_mini all",
                          "ie 9"
                        ],
                    生产环境，默认生产环境
                        "development": [
                          "last 1 chrome version",
                          "last 1 firefox version",
                          "last 1 safari version",
                          "ie 9"
                        ]
                      },*/
                    {
                        loader:'postcss-loader',
                        options:()=>{
                            //postcss 插件
                            require('postcss-preset-env')()
                        }
                    }


                ]
            },
        ]
    },
    //plugins的配置
    plugins: [
        //功能：默认会创建一个空的html文件，引入打包输出的所有资源
        //需求：需要一个有结构的html.
        new HtmlWebpack({
                //复制如下文件，并将它原本的功能并引入打包输出的所有资源
                template: "./src/index.html"
            }
        ),
        new MiniCssExtractPlugin({
            //对输出的文件进行重命名
            filename: 'css/built.css'
        })
    ],
    //模式
    mode: "development",
    // mode:"production"
}

pacakage.json 加一个属性如下

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 9"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 9"
    ]
  },

4.压缩css

使用插件optimize-css-assets-webpack-plugin,先下载，然后引入，再使用，跟其他插件的使用方法是一样的。