2021-11-17 学习计划与总结

• HTTPS 再过一下；
• WebPack 优化
• 下午红宝书
• 晚上喝酒~

HTTPS

WebPack

webpack 的热部署

首先 webpack 是一个打包工具，我们写的文件一般都需要经过打包之后再运行，但是这样的话，对于开发调试很不方便，所以 webpack 中有热加载的方式

这种方式只会在内存中打包压缩，不会进行打包输出

devServer: {
    contentBase: resolve(__dirname, 'build'), // 找到打包文件夹
    compress: true, // 使用 gzip 压缩
    port: 3000, // 端口号
    open: true // 自动打开浏览器
}

webpack 将 css 输出成单个文件

webpack 将 css 打包成单独的文件 - 使用 mini-css-extract-plugin,我们需要将 module 中的 style-loader 换成 MiniCssExtractPlugin.loader,并且应该在 plugin 中使用 MiniCssExtractPlugin

webpack 兼容浏览器

使用 postcss --> postcss-loader postcss-preset-env,帮 postcss 找到 package.json 中 browserslist 里面的配置，并通过配置加载指定的兼容性

首先,loader 中应该添加 postcss-loader

{
    loader：'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: () => [
            require('postcss-preset-env')()
        ]
    }
}

然后在 package.json 文件中配置 browserslist，可以在 github 上搜一下配置参数

"browserslist": {
    "development": [
        // 兼容 最近的一个版本
        "last 1 chrome version",
        "last 1 firefox version"
    ],
    "productions": [
        // 全球超过 0.2% 人使用的浏览器
        ">0.2%",
        // 不在维护的浏览器
        "not dead"
    ]
}

最后，可以在 webpack.config.js 中去配置一下 node 环境 process.env.NODE_ENV='development'

css 压缩

可以使用 OptimizeCssAssetsWebpackPlugin 插件来压缩