webpack4复习笔记

发表于 | 分类于 |



webpack的卸载

webpack4.x开始官方文档是说要单独安装webpack-cli所以如果是用4.+就需要卸载cli

1
2
3
4
5
6
7
8
//删除全局webpack-cli  卸载uninstall可以简写成un，全局-g的完整写法是--global
npm uninstall -g webpack-cli
//删除本地（局部）webpack-cli
npm uninstall webpack-cli
//删除全局webpack
npm uninstall -g webpack
//删除本地webpack
npm un webpack



webpack的安装与使用

在空文件夹pratice下执行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//全局安装，默认最新版本，可以使用@指定版本
npm install webpack -g


//可以使用cnpm淘宝镜像，这样速度更快
npm install -g cnpm --registry=https://registry.npm.taobao.org
//用cnpm来安装。速度较快
cnpm install webpack -g

//在3版本及之前安装webpack的时候就一同把webpack-cli也下载了，但是webpack4开始需要手动安装webpack-cli
//安装webpack-cli
cnpm install webpack-cli -g
//查看版本号
webpack -v

至此webpack安装成功。

然后执行webpack命令，结果报错：

原因是webpack命令会默认打包该路径下src文件夹下的index.js文件，但是我们这个pratice是个空文件夹。我们可以新建一下src/index.js，然后再执行webpack就不会报错了。执行webpack后会自动生成一个dist文件夹，里面有将index.js打包好的main.js文件，默认是production压缩形式，可以执行webpack --mode development打包成未压缩的格式，方便阅读。

因为浏览器不支持require、import等那几个模块化变量，所以如果在src的js代码中使用了模块化，直接引用这样的js文件，浏览器是会报错的，所以需要通过webpack解析打包生成新的js文件，如上述的dist/main.js，然后引用这个js文件才ok。

引入模块化的简单打包

新建sum.js：

1
2
3
export default function(a,b){
    return (a+b);
}

新建minus.js：

1
2
3
module.exports = function(a,b){
    return a -b;
}

项目pratice中新建demo.js：

1
2
3
4
5
6
7
8
import sum from './sum.js'/* 使用ES Module规范 */
var minus = require('./minus.js')/* 使用commonjs规范 */

var a = sum(1,5);
console.log(a);

var b = minus(100,9);
console.log(b);

引入了ES Module和commonJS的模块化代码，浏览器是不支持的，所以要使用webpack来打包生成目标js文件，但是这次我不想被默认地打包到dist/main.js中，故可以使用命令webpack demo.js -o ./hh/bundle.js将模块化代码打包到指定的路径下。



关于安装本地局部webpack

在此之前，我已经安装了全局的webpack，因此除了上述的项目路径下可以使用webpack指令，其他的路径也是可以使用的。但是最好再当前的项目路径下再安装一个本地局部的webpack。

先在项目根路径下执行npm init指令进行项目初始化，该过程中可以一路回车。会生成一个package.json文件，里面会记录你的各种加载器loader、插件、webpack或者jQuery等等相关信息。这是非常方便的一个事情，举个例子：比如我拿到了别人给我的一个项目，package.json里面就记录了该项目所依赖的各种东西，比如webpack是3.0版本的，而我的全局webpack是4.0版本的，那么不用慌，我可以查看package.json里记录的信息，手动安装一次本地的webpack3.0。更方便的是我可以直接执行npm install指令自动下载package.json里面的所有依赖。

项目初始化完成后，执行npm install webpack --save-dev安装本地开发版本的webpack。之后会生成一个node modules的文件夹，里面都是安装下来的包。webpack-cli也是一样本地安装一次。



关于webpack.config.js

webpack.config.js是webpack的默认配置文件，它的书写必须遵循CommonJs规范。它不是唯一的，一个项目可以有多个配置文件。

1
2
3
4
5
6
7
8
9
10
11
var path = require('path');/* path是node里面的变量 */

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),/* __dirname表示当前路径文件夹 */
        filename: 'my-first-webpack.bundle.js'/* 打包文件的名字 */
    },
    mode: 'development',/* 设置打包出来的文件是未压缩的格式 */

};


配置多个入口文件

可以使用对象的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var path = require('path');/* path是node里面的变量 */

module.exports = {
    entry: {
        index: './src/index.js',
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),/* __dirname表示当前路径文件夹 */
        filename: '[name].bundle.js' /* 注意这里用了[name] */
    },
    mode: 'development',/* 设置打包出来的文件是未压缩的格式 */

};

执行webpack指令后会在dist文件夹下生成对应的app.bundle.js和index.bundle.js。注意filename: '[name].bundle.js'


loader

loader用于处理非js文件。在webpack中写相应的配置规则，并且安装相应的插件。下面以less-loader为例：

1
2
//安装less-loader之前先安装less
cnpm i style-loader less-loader css-loader less --save-dev

修改webpack.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var path = require('path');/* path是node里面的变量 */

module.exports = {
    entry: {
        index: './src/index.js',
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),/* __dirname表示当前路径文件夹 */
        filename: '[name].bundle.js' /* 注意这里用了[name] */
    },
    module: {
        rules: [
            { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] }
        ]
    },
    mode: 'development',/* 设置打包出来的文件是未压缩的格式 */

};

以下是常见的几个loader：

1
2
3
4
5
6
7
8
9
10
11
12
module: { // 配置所有第三方loader 模块的
  rules: [ // 第三方模块的匹配规则
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, 
    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 
    { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理图片路径的loader
    // limit给定的值，是图片的大小，单位是byte， 如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串， 如果图片小于给定的limit值，则会被转为base64的字符串
    { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, //处理字体文件的 loader 
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置Babel来转换ES6语法
    { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
  ]
},


plugins

loader被用于转换某些非js类型的模块，而插件则可以执行范围更广的任务，包括：从打包优化和压缩，一直到重新定义环境中的变量等等。

想要使用一个插件，先安装下载，然后需要require()它，然后把它添加到plugins数组中。

cnpm i html-webpack-plugin -D执行该指令安装插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var path = require('path');/* path是node里面的变量 */
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
module.exports = {
    entry: {
        index: './src/index.js',
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),/* __dirname表示当前路径文件夹 */
        filename: '[name].bundle.js' /* 注意这里用了[name] */
    },
    module: {
        rules: [
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.ts$/, use: 'ts-loader' }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()/* 这里可传参也可不传参 */
    ],
    mode: 'development',/* 设置打包出来的文件是未压缩的格式 */

};

然后会在dist文件中生成index.html文件，里面自动引入了我们配置的js文件。



JS tree shaking

项目文件 treeShaking，先项目初始化npm init -y，然后在生成的package.json里面添加"dev": "webpack --mode development" ，之后就不用每次都执行那么长的指令了，直接npm run dev即可。同理也可以配置以下生产环境的指令"prod": "webpack --mode production"

js tree shaking通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)，就是把未使用到的js代码去掉，精简js代码。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。


development VS production

举个例子：

index.js:

1
2
import {abc} from '../sum.js';
abc();

sum.js

1
2
3
4
5
6
7
8
9
10
11
12
13
var abc = function(){
    console.log('这是abc');
};

var heihei = function(){
    console.log('这是heihei');
};


export {
    abc,
    heihei
}

执行npm run dev后生成main.js，事实上我们只引用到了sum.js中的abc，并没有使用heihei，但是在webpack生成的main.js中搜索heihei关键字，发现依旧生成了关于heihei的代码，这造成了不必要的冗余。

如果我们执行npm run prod生成main.js，我们发现没有生成关于heihei的代码，因为production模式下会自动去掉未使用的js代码，实现了tree shaking。


webpack-deep-scope-plugin

Loadsh 是一个一致性、模块化、高性能的 JavaScript 实用工具库。在数据操作时，我们经常会用的 loadsh 封装好的一些工具方法，但是并不想把整个包打包进项目里面。要用到 tree-shaking，必然要保证引用的模块都是 ES6 规范的。lodash-es 是着具备 ES6 模块化的版本，只需要直接引入就可以。

先安装lodash-es： cnpm i lodash-es -D

sum.js中引入lodash-es库：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import lodash from 'lodash-es'
var abc = function(){
    console.log('这是abc');
};

var isArray = function(arg){
    console.log(lodash.isArray(arg)); /* 判断传入的参数是否为数组 */
};


export {
    abc,
    isArray
}

但是index.js中仍然只使用abc：

1
2
import {abc} from '../sum.js';
abc();

执行npm run dev，发现打包后的文件大小多达1.5Mb，相比于npm run prod生成的只有86Kb大小，因为它把lodash-es也打包进去了尽管我们index.js中并没有真正使用到lodash-es。但是尽管npm run prod生成的main.js确实比development的小，事实上它也打包了lodash-es里的代码了，只是比前者少了一点。因为npm run prod只能进行词法语法层面上的分析（sum.js中确实写了些关于lodash-es的代码），无法进行scope作用域上的分析，到底真正用没用它是不知道的。因此，npm run prod并不是最佳的tree shaking。

这里 就需要用到一个插件： webpack-deep-scope-plugin。 先安装npm i webpack-deep-scope-plugin -D

在webpack.config.js中进行配置：

1
2
3
4
5
6
7
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;

module.exports = {
    plugins: [
        new WebpackDeepScopeAnalysisPlugin()
    ]
}

然后，执行npm run prod，我们发现打包出来的main.js大小不到1Kb。js tree shaking得到了较好的结果。



CSS tree shaking

首先关于css的，就一定要先安装好style-loader和css-loader，以及写好配置规则。

单独抽离出css

然后需要安装一个插件mini-css-extract-plugin，用于单独抽离出css文件而非被写进main.js中。

写好配置规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
        ]
    },
    plugins: [
        new WebpackDeepScopeAnalysisPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            // chunkFilename: '[id].css',
        }),
    ]
}

注意的是，这里用MiniCssExtractPlugin.loader代替了之前的style-loader，style-loader是生成行间样式的，这个mini-css-extract-plugin插件可以生成一个main.css文件，然后我们就可以使用<link rel="stylesheet" href="../dist//main.css">来引入css。在生成的dist/main.js中是没有关于demo.css的代码的，做到了单独抽离出css文件。


css抖动

渡一视频这里用到了一个新的插件purifycss-webpack。但是这个插件已经被弃用了，用起来也有些bug，有些有被使用到的css没有被打包。我这里就不写了。



复习一下处理css/less和postcss

1
2
3
4
5
6
7
8
npm init -y
npm i webpack -D
npm i webpack-cli -D
npm i css-loader -D
npm i style-loader -D
npm i less -D
npm i less-loader -D
npm i mini-css-extract-plugin -D
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
//demo.css
*{
    margin:0;
    padding:0;
}
.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    margin: 100px auto;
    transform: rotate(45deg);
    .box {
        position: absolute;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        top: 40%;
        left: 40%;
        text-align: center;
        a{
            color: pink;
            font-size: 30px;
            line-height: 300px;
        }
    }
}
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
//demo.less
*{
    margin:0;
    padding:0;
}
.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    margin: 100px auto;
    transform: rotate(45deg);
    .box {
        position: absolute;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        top: 40%;
        left: 40%;
        text-align: center;
        a{
            color: pink;
            font-size: 30px;
            line-height: 300px;
        }
    }
}
1
2
//index.js
 import './demo.css';
1
2
3
4
5
6
7
8
9
//index.html
<body>
    <div class="wrapper">
        <div class="box">
            <a href="#">hello world</a>
        </div>
    </div>
    <script src="./dist/index.bundle.js"></script>
</body>
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
var path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //单独抽离出css文件
module.exports = {
    entry:{
        index: './index.js'
    },
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    {
                        loader: MiniCssExtractPlugin.loader,
                        // options:{  }
                    },
                    {
                        loader: 'css-loader',

                    }
                ]
            },
            {
                test: /\.less$/,
                use:[
                    {
                        loader: MiniCssExtractPlugin.loader,
                        // options:{  }
                    },
                    {
                        loader: 'css-loader',

                    },
                    {
                        loader: 'less-loader',
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            // chunkFilename: '[id].css',
        }),
    ]
}


postcss

有个问题就是关于css3的兼容代码，像demo.less里面的transform: rotate(45deg);，需要写：

1
2
3
4
5
transform: rotate(45deg);
-ms-transform: rotate(45deg);        /* IE 9 */
-webkit-transform: rotate(45deg);    /* Safari and Chrome */
-o-transform: rotate(45deg);        /* Opera */
-moz-transform: rotate(45deg);        /* Firefox */

基于postcss可以自动帮我们加上这些兼容的前缀。

另一个问题就是基于postcss可以解析cssnext的代码：

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
//带有cssnext代码的demo.less
*{
    margin:0;
    padding:0;
}
.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    margin: 100px auto;
    transform: rotate(45deg);
    .box {
        position: absolute;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        top: 40%;
        left: 40%;
        text-align: center;
        a{
            color: pink;
            font-size: 30px;
            line-height: 300px;
        }
    }
}

:root{
    --color: red;
}
a{
    color: var(--color);
}


安装与配置

1
cnpm i postcss postcss-loader autoprefixer cssnano postcss-cssnext -D

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
var path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry:{
        index: './index.js'
    },
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    {
                        loader: MiniCssExtractPlugin.loader,
                        // options:{  }
                    },
                    {
                        loader: 'css-loader',

                    }
                ]
            },
            {
                test: /\.less$/,
                use:[
                    {
                        loader: MiniCssExtractPlugin.loader,
                        // options:{  }
                    },
                    {
                        loader: 'css-loader',

                    },
                    {   /* 这部分要写在css-loader之后、less-loader之前 */
                        loader: 'postcss-loader',
                        options:{
                            ident: 'postcss',
                            plugins:[
                                require('postcss-cssnext')(), /* 用于解析cssnext代码，并实现autoprefixer的功能 */
                                // require('autoprefixer')(),/* 用于自动添加兼容前缀 , 注意在数组里面不可以有分号*/
                                require('cssnano')() /* 用于压缩代码 */
                            ]
                        }
                    },
                    {
                        loader: 'less-loader',
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            // chunkFilename: '[id].css',
        }),
    ]
}



单独抽离html文件


HtmlWebpackPlugin

npm install –save-dev html-webpack-plugin 安装之，然后再webpack.config.js中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var HtmlWebpackPlugin = require('html-webpack-plugin');

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            // chunkFilename: '[id].css',
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            minify:{
                removeComments: true,  /* 清理掉index.html里面的注释 */
                collapseWhitespace: true, /* 清理掉空格 */
            }
        }),
    ]

之后会生成dist/index.html，而且里面会自动引入所需要的css和 js，因此不必再src/index.html中手动加入了。

事实上html-webpack-plugin还有很多可以配置的东西，网上都有。


clean-webpack-plugin

另外我们每次webpack要重新生成dist文件夹的时候，之前生成的一直都在着需要手动删除，比较麻烦，所以可以使用一个插件clean-webpack-plugin。 命令npm i clean-webpack-plugin -D执安装之。

然后再webpack.config.js中配置：

1
2
3
4
5
const CleanWebpackPlugin = require('clean-webpack-plugin');

    plugins: [
        new CleanWebpackPlugin()
    ]

即可。



提取公共JS代码

存在一个情况，假如有a，b两个js文件，它俩都引入了一个相同的第三方库或者是相同的自定义的模块。那么当我们加载a文件的时候会把它打包出来，包括引用了的相同的库和模块，而加载b文件的时候也做了相同的事情，那么明明是相同的一个库或模块，却被打包了两次，这样就冗余了，降低了效率。我们将同一个代码/模块/库打包了多次，因此我们需要做到提取公共JS代码，避免上述情况发生，实现减少代码冗余，提高项目的加载速度。

注意的是，提取公共代码针对的是多入口文件，如果只有一个js文件的话是不成立的。提取公共代码至少是两个文件。


案例一： 自定义公共业务代码

1
2
//这是一个公共模块 module.js
export default 'module'
1
2
3
//subPageA.js
import './module.js';
export default 'subPageA';
1
2
3
//subPageB.js
import './module.js';
export default 'subPageB';
1
2
//pageA.js
import './subPageA.js'
1
2
//pageB.js
import './subPageB.js'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
entry:{
    // index: './index.js'
    pageA: './src/pageA.js',
    pageB: './src/pageB.js',
},
output:{
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][hash:5].bundle.js',
    chunkFilename: '[name][hash:5].js'
},
optimization:{
    splitChunks:{
        cacheGroups:{
            common:{
                name:"common", /* 表示打包出来的公共模块的名字，不写的话就默认是chunkFilename */
                chunks:'all', /* 表示作用的范围 */
                minSize: 1, /* minSize表示生成公共代码块所需要最小的体积，默认是30kb */
                minChunks: 2/* 表示公共模块被引用的最小次数，这里表示当一个模块被引用了2次以上就视为公共代码块 */
            }
        }
    }
},

打包后的：


案例二： 从lodash中提取公共代码

先安装一下lodash： cnpm i lodash -D

1
2
3
//pageA.js
import './subPageA.js';
import * as _ from 'lodash'; //引用lodash
1
2
3
//pageB.js
import './subPageB.js';
import * as _ from 'lodash'; //引用lodash

注意的是，我们之前打包出来的公共js文件是我们自定义的公共模块，这里我们引用了第三方库lodash，最好是不要和我们自定义的模块一同被打包到一个公共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
entry:{
    // index: './index.js'
    pageA: './src/pageA.js',
    pageB: './src/pageB.js',
},
output:{
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][hash:5].bundle.js',
    chunkFilename: '[name][hash:5].js'
},
optimization:{
    splitChunks:{
        cacheGroups:{
            common:{
                name:"common", /* 表示打包出来的公共模块的名字，不写的话就默认是chunkFilename */
                chunks:'all', /* 表示作用的范围 */
                minSize: 1, /* minSize表示生成公共代码块所需要最小的体积，默认是30kb */
                minChunks: 2,/* 表示公共模块被引用的最小次数，这里表示当一个模块被引用了2次以上就视为公共代码块 */
                priority: 1 /* 设置优先级，低于vendor的 */
            },
            vendor:{
                name:'vendor',
                test:/[\\/]node_modules[\\/]/,/* 表示匹配node_modules里的第三方库lodash */
                priority: 10,/* 设置优先级，先打包node_modules的*/
                chunks: 'all'
            }
        }
    }
}

打包之后：



处理图片

项目根目录img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm init -y
npm i webpack -D
npm i webpack-cli -D
npm i css-loader -D
npm i style-loader -D
npm i mini-css-extract-plugin -D
npm i clean-webpack-plugin -D
npm i html-webpack-plugin -D

//处理图片要安装以下loader和插件
cnpm i url-loader img-loader -D
cnpm i file-loader -D
npm install imagemin-pngquant -D
npm i imagemin -D
npm i html-loader -D


关于img-loader和imagemin-pngquant

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
var path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //单独抽离出css文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name][hash:5].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        // options:{  }
                    },
                    { loader: 'css-loader' }
                ]
            },
            { // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name][hash:5].[ext]',
                            /* 限制图片大小 */
                            limit: 77967,
                            outputPath: 'img' /* 会创建dist/img文件夹 */
                        }
                    },
                    // use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' 
                    {
                        loader:'img-loader',
                        options:{
                            plugins:[
                                require('imagemin-pngquant')({
                                    quality:[0.3,0.6]
                                  }),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            // chunkFilename: '[id].css',
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            // minify:{
            // removeComments: true,  /* 清理掉index.html里面的注释 */
            // collapseWhitespace: true, /* 清理掉空格 */
            // }
        }),
        new CleanWebpackPlugin()
    ]
}

以上到这一步为止，只能处理css中的url，尚无法解析html中引用的图片路径，比如html中的<img src="./logo.png" alt="">是会报错的。因此需要安装一个html-loader，然后在webpack.config.js中的module->rules添加一个test:

1
2
3
4
5
6
7
8
9
10
11
 {
    test:/\.html$/,
    use: [
        {
            loader: 'html-loader',
            options:{
                attrs:['img:src']
            }
        }
    ]
}

然后就 ok 了



webpack-dev-server开启本地服务器

先安装 ： npm install webpack-dev-server -g 要全局安装

安装成功后执行命令webpack-dev-server --open就可以了，默认在localhost:8080端口，项目就启动了。但是要注意的是，该命令并没有把项目进行打包，所以最后发布的时候还是要用webpack指令进行打包。

它会实时监听代码的变化。


devServer配置：

1
2
3
4
5
6
7
module.exports = {
    ...
    devServer:{
    port:'9091',
    // contentBase:'dist' /* 不填的话默认是项目根路径 */
    }
}



进行数据交互

mock一个假数据

1
2
3
4
5
//data.json
{
    "name": "新裤子乐队",
    "birthday": "1996"
}
1
2
3
//index.js
var data = require('./data.json');
console.log(data);

然后就可以了。



再来说说使用ajax的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//index.js
import $ from 'jquery';
var data = require('./data.json');
console.log(data);

$.ajax({
    url: 'http://localhost:9091/data.json',
    success: function(data){
        console.log('ajax获取数据成功：');
        console.log(data);
    },
    error:function(){
        console.log('获取数据失败！');
    }
})



热更新 hot module replace

虽然说webpack-dev-server可以自动监听代码变化并自动刷新，但是它每次刷新都要整个页面刷新，整个页面的所有数据都要重新请求一遍，实际上修改的只是一部分，其他的是不必要重新请求的。这里引出了热更新这个概念。热更新，英文为 hot module replace，直译为“热模块替换”，这里的热模块就是被修改的那部分模块。

webpack中内置了热更新的插件，所以不必再下载，直接再webpack.config.js中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
var Webpack = require('webpack');//第一步

module.exports = {
    ...
    plugins:[
        ...,
    //第二步
        new Webpack.HotModuleReplacementPlugin(), /* webpack内置的热更新插件 */
    ],
    devServer:{
        port: "9091",
        // contentBase: 'dist'  /* 默认是项目根路径 */
        hot: true, /* 开启热更新 */
    }
}

这样热更新基本实现了。

【需要注意的是】：

对于CSS，如果使用了MiniCssExtractPlugin单独抽离出来css文件，那么这个热更新是无效的。之对于使用style-loader的有效。

对于JS，目前这一步是无法实现对于js的热更新的 ，需要再js文件中添加如下代码：

1
2
3
if(module.hot){
    module.hot.accept();
}

这样就实现了对于js代码的热更新。