webpack学习笔记（2）

1、解析ES6和React JSX

• cnpm i @babel/core @babel/preset-env babel-loader -D (--save-dev 简写)
• 增加@babel/preset-react插件，支持react的jsx语法

2、解析CSS

css-loader用于加载.css文件，并且转换成commonjs对象
style-loader将样式通过<style>标签插入到head中

• cnpm i style-loader css-loader -D 安装依赖
• cnpm i less less-loader -D less-loader用于将less转换成css

'use strict'
const path = require('path')
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
                        {
                          test: /\.css$/,
                          use: [
                            'style-loader',
                            'css-loader',
                            'less-loader'
                          ]
                        },
                        {
                          test: /.less$/,
                          use: [
                            'style-loader',
                             'css-loader',
                            'less-loader'
                          ]
                      }
        ]
    }
}

3、解析图片

file-loader用于处理文件

• cnpm i file-loader -D 安装file-loader

module: {
    rules: [{
          test: /.(png|jpg|gif|jpeg)$/,
          use: 'file-loader'
        }]
}

4、解析字体

file-loader用于处理文件

• cnpm i file-loader -D 安装file-loader

module: {
    rules: [{
          test: /.(woff|woff2|eot|ttf|otf)$/,
          use: 'file-loader'
        }]
}

4、解析图片

url-loader也可以处理图片和字体，可以设置较小资源自动base64

• cnpm i url-loader -D 安装file-loader

module: {
    rules: [{
          test: /.(png|jpg|gif|jpeg)$/,
          use: [{
            loader: 'url-loader',
            options: {
              limit: 10240
            }
          }]
        }]
}

5、webpack中文件监听

文件监听是在源代码发生改变时，自动重新构建出新的输出文件
webpack开启监听模式，有两种方式：

• 启动webpack命令时，带上--watch参数 缺点：每次需要手动刷新浏览器

// package.json
"scripts": {
    "watch": "webpack --watch"
  },

• 在配置webpack.config.js中设置watch: true;

文件监听的原理分析：

轮询判断文件的最后编辑事件是否变化
某个文件发生了变化，并不会立刻告诉监听者，而是先缓存下来，等aggregateTimeout后执行

module.exports = {
    // 默认false，也就是不开启
    watch: true,
    // 只有开启监听模式时，watchOptions才生效
    watchOptions: {
        // 默认为空，不监听的文件或则文件夹，支持正则匹配
        ignored: /node_modules/,
        // 监听到变化发生后会等待300ms再去执行，默认300ms
        aggregateTimeout: 300,
        // 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒访问1000次
        poll: 1000
    }
}

6、热更新

1）webpack-dev-server热更新
WDS 不刷新浏览器
WDS 不输出文件，而是放在内存中
使用HotModuleReplacementPlugin插件

• cnpm i webpack-dev-server -D 安装依赖

// package.json
"scripts": {
    "dev": "webpack-dev-server --open"
  },

2）webpack-dev-middleware热更新

image.png

7、热更新的原理分析

image.png

8、什么是文件指纹

打包后输出的文件名的后缀

• 文件指纹如何生成
  Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash就会更改
  Chunkhash：和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值
  Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变
• JS的文件指纹设置

module.exports = {
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    },

• 图片、文字文件的文件指纹设置

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    },
    mode: 'production', // 开发环境 development ， 生产环境 production , 无 none
    module: {
        rules: [
            // 图片文件指纹
            {
              test: /.(png|jpg|gif|jpeg)$/,
              use: [{
                loader: 'file-loader',
                options: {
                  name: '[name]_[hash:8].[ext]'
                }
              }]
            },
            // 字体文件指纹
            {
              test: /.(woff|woff2|eot|ttf|otf)$/,
              // use: 'file-loader'
              use: [{
                loader: 'file-loader',
                options: {
                  name: '[name]_[hash:8][ext]'
                }
              }]
            },
        ]
    }
}

• CSS的文件指纹设置
• cnpm i mini-css-extract-plugin -D 安装依赖
  将css提取成一个独立的文件并设置指纹格式

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
{
              test: /.css$/,
              use: [
                // 'style-loader', // 和miniCssExtractPlugin.loader互斥
                MiniCssExtractPlugin.loader,
                'css-loader'
              ]
            },
            {
              test: /.less$/,
              use: [
                // 'style-loader', // 和miniCssExtractPlugin.loader互斥
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader'
              ]
            },

  plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]