Webpack插件使用及热更新打包

发表于 | 分类于

1、HtmlWebpackPlugin 自动生成基本的 html 页面
2、开启文件监听
3、webpack-dev-server热更新

安装依赖

1
cnpm i html-webpack-plugin webpack-dev-server -D

配置文件
1、.babelrc

1
2
3
4
5
{
    "presets": [
        "@babel/preset-env",
    ]
}

2、package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "name": "web-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.3",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "style-loader": "^1.1.3",
    "url-loader": "^4.0.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

3、webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
'use strict'
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack');

module.exports = {
    // 文件监听
    watch: true,

    watchOptions: {
        //默认为空，设置不监听的文件或者文件夹，支持正则匹配
        ignored: /node_modules/,
        //监听到变化发生后会等300ms再去执行，默认300ms
        aggregateTimeout: 300,
        //设置轮询文件是否变化时间，默认每秒问1000次
        poll: 1000
    },

    // 打包入口
    entry: {
        index: './src/index.js',
    },

    // 指定输出地址及打包出来的文件名
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },

    plugins: [
        // 自动生成基本的 html 页面
        new HtmlWebpackPlugin({
            title: 'leaningwebpack',        // 文件的标题
            filename: 'webpack-index.html', // 文件名
            favicon: 'src/demo.png'          // 网页图标
        }),

        // 热更新
        new webpack.HotModuleReplacementPlugin()
    ],

    devServer: {
        contentBase: './dist',
        hot: true
    },

    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader',
                // 忽略依赖包
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                // 执行的时候是先加载css-loader，将css解析好后再将css传递给style-loader
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(jpg|png|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 如果图片大小小于这个值，就会被打包为base64格式
                        limit: 160000,
                        name: 'imgs/[name].[hash].[ext]'
                    }
                }]
            }
        ]
    },

    // 开发环境
    mode: 'production',
}

参考
Webpack 实战入门系列（二）：插件使用及热更新打包