webpack学习笔记（2）

2019-08-20 本文已影响0人 wayne1125

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、热更新的原理分析