初识 webpack (三)

初识 webpack (三)

webpack 4

1. 自动清空构建目录

# webpack.config.js 中
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

# webpack.config.js [plugins 中]
new  CleanWebpackPlugin(),

2. 补齐 css3 前缀

browlist: https://browserl.ist/

Github: https://github.com/browserslist/browsersli...

npm i -D postcss-loader autoprefixer

# webpack.config.js [module.rules 中]
{
    test: /\.less/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('autoprefixer')({
                        browsers: ['last 2 version', '>1%']
                    }),
                ]
            }
        },
        'less-loader',
    ]
},

3. px 转换为 rem

npm i -D px2rem-loader

# css
.search-text {
  font-size: 20px;
  color: red;
  display: flex;
  border-radius: 4px; /*no*/ 
}

/*no*/  表示不进行转换

# webpack.config.js [module.rules 中]
{
    test: /\.less/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('autoprefixer')(),
                ]
            }
        },
        {
            loader: 'px2rem-loader',
            options: {
                // 1rem = 75px
                remUnit: 75,
                // 精度
                remPrecision: 8
            }
        },
        'less-loader'
    ]
},

4. 静态资源内联

代码层⾯

  • ⻚⾯框架的初始化脚本
  • 上报相关打点
  • css 内联避免⻚⾯闪动

请求层⾯:减少 HTTP ⽹络请

  • ⼩图⽚或者字体内联 (url-loader)
npm i -D raw-loader@0.5.1

# 手淘的 自动计算 font-size 脚本
 npm i lib-flexible

4.1 HTML, JS 内联

使用 raw-loader

...
<head>
${ require('raw-loader!./meta.html') }
<title>Document</title>
<script>${ require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js') }</script>
</head>
...

4.2 css 内联

  1. style-loader

初识 webpack (三)

  1. html-inline-css-webpack-plugin

5. sourcemap

sourcemap 关键字 说明
eval 使⽤ eval 包裹模块代码
source map 产⽣ .map ⽂件
cheap 不包含列信息
inline 将 .map 作为 DataURI 嵌⼊,不产⽣ .map ⽂件
module 包含 loader 的 sourcemap
# webpack.config.js 中
devtool: 'source-map'

6. 提取公共库

6.1 使用 html-webpack-externals-plugin 插件提取

将公共库(比如 jquery) 从 bundle.js 中提取出来.

文档: https://www.npmjs.com/package/html-webpack...

npm i -D html-webpack-externals-plugin

# webpack.config.js 中
const  HtmlWebpackExternalsPlugin  =  require('html-webpack-externals-plugin');

# webpack.config.js [plugins 中, **放在 HtmlWebpackPlugin 实例之后**]
new HtmlWebpackExternalsPlugin({
    externals: [
        {
            module: 'jquery',
            entry: 'dist/jquery.min.js',
            global: 'jQuery',
        },
    ],
}),

6.2 使用 SplitChunksPlugin(webpack 4内置) 插件提取

# webpack.config.js 中
optimization: {
    splitChunks: {
        cacheGroups: {
            jqueryA: {
                chunks: "all",
                test: /jquery/,
                name: "jquery",
            },
        }
    }
},

# 引入到 html 文件中, 需要在 html-webpack-plugin 的实例配置 chunks 中加上 jquery

chunks: 
    async 异步引⼊的库进⾏分离(默认)
    initial 同步引⼊的库进⾏分离
    all 所有引⼊的库进⾏分离(推荐)

6.3 提取公共资源

# webpack.config.js 中
optimization: {
    splitChunks: {
        cacheGroups: {
            ...
            commons: {
                chunks: "all",
                name: "commons",
                minChunks: 2,
                minSize: 0
            }
        }
    }
},

minChunks: 最少引用次数, >= 这个次数才会提取出来
minSize: 提取出来的文件的最小size. 如果小于设定的值是不会提取的

7. Tree Shaking (webpack4 mode: production的情况下, 默认开启)

通俗的解释: 用到的方法打包, 用不到的方法不打包(去掉)
那么这个 用到的 又如何理解呢?

  • 代码不会被执行, 不可到达
  • 代码的执行结果不会被用到
  • 代码只会影响死变量(只写不读)

如果代码有副作用, Tree Shaking 会失效.

副作用这个概念来源于函数式编程(FP),纯函数是没有副作用的,也不依赖外界环境或者改变外界环境。纯函数的概念是:接受相同的输入,任何情况下输出都是一样的。
非纯函数存在副作用,副作用就是:相同的输入,输出不一定相同。或者这个函数会影响到外部变量、外部环境。
函数如果调用了全局对象或者改变函数外部变量,则说明这个函数有副作用.

必须是 es6 语法, commonJs 不支持

8. Scope Hoisting (webpack4 mode: production的情况下, 默认开启)

原理: 将所有模块的代码按照引用顺序放在一个函数作用域里, 适当的重命名一些变量以防止命名冲突.

简单的理解就是: 减少了闭包数量, 从而减少了内存消耗. 但是对于引用次数 >1 的模块是无法进行此项优化的.

9. 动态 import

import('').then();

10. eslint

eslint-config-alloy: https://github.com/AlloyTeam/eslint-config...

eslint-config-airbnb: https://github.com/airbnb/javascript/tree/...

eslint rules: http://eslint.cn/docs/rules/

11. 优化构建时日志显示

# 初识 webpack (三)

# webpack.config.js 中
stats: 'minimal'

# 更有好的显示构建结果
npm i -D friendly-errors-webpack-plugin

# webpack.config.js 中
const  FriendlyErrorsWebpackPlugin  =  require('friendly-errors-webpack-plugin');

# webpack.config.js [plugins 中]
new  FriendlyErrorsWebpackPlugin()
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 2
cnguu

我想知道这些知识的获取途径,可以分享下吗? :heart: :kissing_heart:

6个月前 评论

@cnguu 极客时间 + 文档

file

6个月前 评论
cnguu 6个月前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!