Webpack学习笔记

源码参考地址

my-webpack-learning

入门第一个案例

1. 初始化项目：yarn init

$ 执行完后，当前文件夹下面会自动创建package.json文件。

2. 安装本地webpack：yarn add webpack webpack-cli -D
3. 创建src文件夹，创建index.js文件和index.html等文件
4. 编译：npx webpack --entry=./src/index.js --output-filename=bundle.js --mode=development
5. 测试
6. 有用命令（帮助）：npx webpack -h

简化使用

1. 默认配置文件：webpack.config.js

# 配置说明

2. webpack-dev-server

$ 安装命令
yarn add webpack-dev-server -D
$ 配置启动路径（webpack-config.js）
+ 提示：**publicPath（资源请求路径）**
++ HTML相关
  - 空字符串或者./开头的路径，是相对根项目来说
++ Host相关
  - /开头的路径，是相对打包编译的路径来说
devServer: {
    publicPath: '/',
    port: 3000
}

webpack基本功

预处理器

CSS Loader（至少要配套style-loader一起使用）

$ 安装组件：yarn add css-loader style-loader -D

module: {
        /* 从右往左依次解析，并且exclude优先 */
        rules: [{
            test: /\.css$/,
            use: ['style-loader','css-loader'],
            exclude: /node-modules/,
            include: /(assets|src)/
     }]
}

Babel Loader（主要功能是将ES6+等转换成ES5等）

$ 安装组件：yarn add babel-loader @babel/core @babel/preset-env -D

{
    /* 处理ES6+ */
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true,
            presets: [
                ['@babel/preset-env', {
                    /* 禁用模块语句的转化 */
                    modules: false
                }]
            ]
        }
    }
}

File Loader

$ 安装组件：yarn add file-loader -D

{
    /* 处理其他文件资源 */
    test: /\.(png|jpe?g|gif|svg)$/,
    use: {
        loader: 'file-loader',
        query: {
            name: 'assets/img/[name].[ext]?[contentHash]'
        }
    }
}

进阶：自定义loader

$ 入门不算难，简单的可以参考[force-strict-loader]()，可以参考社区开源的部分，基本不需要做太多工作，拿过来即用。

样式处理

extract-text-webpack-plugin（Webpack<4.0）

mini-css-extract-plugin（Webpack >= 4.0）

$ 安装组件：yarn add mini-css-extract-plugin -D
$ 配置
{
    test: /\.css$/,
    use: [{
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: '../'
        }
    }, 'css-loader'],
    exclude: /node-modules/,
}
$ 好处：
+ 这个能处理异步按需加载

sass

$ 安装组件
yarn add -D sass-loader node-sass
$ 安装配置类似上面

less

$ 安装组件
yarn add less-loader less -D
$ 安装配置类似上面

PostCSS（后续再补充）

代码分片（后续再补充）

CommonsChunkPlugin（webpack < 4.0）

SPlitChunks（webpack >= 4.0）

优化webpack

1. vendor提取（主要是提取一些类库文件，相对不经常变动的静态资源）

$ 类似配置
entry: {
    vendor: ['jquery']
}

2. 压缩JavaScript

• UglifyJS (webpack < 4)
• terser （webpack >= 4）

$ mode=production，默认已经开启

3. 压缩CSS

$ 安装组件
yarn add -D optimize-css-assets-webpack-plugin
$ 配置
optimization: {
        minimize: true,
        minimizer: [ new OptimizeCSSAssetsPlugin({
            
        })],
}

bundle文件体积检控和分析

$ 安装组件
yarn add -D webpack-bundle-analyzer

打包优化

HappyPack（后续补充）

$ 安装组件
yarn add -D happypack

webpack-dashboard

size-plugin

HRM（后续补充）

遗留问题

1. 搭建sentry平台

引用资源

1. webpack中文
2. 搭建sentry