webpack简介

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)*，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 *bundle。

image-20210116120049531

webpack五个核心概念

Entry(入口)

webpack以哪个文件为入口开始打包，分析构建内部依赖图。

OutPut（输出）

打包后的bundles输出到哪里，以及如何命名。

Loader

处理非js文件（webpack本身只能处理js文件）

Plugins(插件)

赋予一些更强劲的功能。

Mode

主要指定webpack响应模式的配置：

选项 描述 特点
development 开发模式
production 生产（线上）模式

webpack配置

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
//webpack.config.js
const { resolve } = require('path')

module.exports = {
    entry:"./src/index.js",
    output:{
        //输出文件名
        filename:'build.js',
        //输出路径一般为绝对路径
        //__dirname是nodejs的变量，代表当前文件的绝对路径
        path:resolve(__dirname,'build')
    },
    
    //loader的配置
    module:{
        rules:[
            
        ]
    },
    
    //plugins的配置
    plugins：[
    
    ],
    
    mode:'development',
    //mode:'production'
}

开发环境要做的事

打包样式资源

要用到loader。 下载–使用

css处理

1
npm i css-loader,style-loader

使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
    ...
    //loader的配置
    module:{
        rules:[
            {
                //处理哪些文件
                test:/\.css$/,
                //使用哪些loader进行处理
                use:[
                    //use顺序是从右到左（从下到上）
                    //创建style标签，将js中的样式资源插入到head中
                    'style-loader',
                    //将css样式编程commonjs模块加载到js中，里面内容是字符串	
                    'css-loader'
                ]
            }
        ]
    },
    ...
}

处理流程：

  1. 先从入口文件开始打包，如果遇到引用文件，则将其引入。

  2. 每次引入的文件先经过loader配置进行过滤：

    2.1 如果匹配到了test中的资源，则用use中的loader进行处理，处理顺序从右往左。

    2.2 先用css-loader进行处理，将css文件写入js;

    2.3 然后通过style-loader将js中的css字符串写进head中。

less处理

1
npm i less,less-loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
    ...
    //loader的配置
    module:{
        rules:[
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    //将less编译成css
                    'less-loader'
                ]
            }
        ]
    },
    ...
}

语义和css一样。

打包HTML资源

要用到plugins:下载–引入–使用:

1
npm i html-webpack-plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
//引入
const HtmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
    ...
    plugins:[
        //默认会创建一个空的html，自动引入打包输出的所有资源
        new HtmlWebPackPlugin({
            //复制这个index.html文件，并自动引入打包输出的所有资源
            template: './index.html',
        })
    ],
}

打包图片资源

1
2
npm i url-loader file-loader # 处理图片
npm i html-loader # 引入HTML中的图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
    ...
    //loader的配置
    module:{
        rules:[
            {
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    //图片小于8kb，就会被base64处理
                    limit:8*1024，
                    //命名为hash值前10位+后缀
                    name:'[hash:10].[ext]'
                }
            },{
                test:/\.html$/,
                //处理html中的img图片的引入
                loader:'html-loader'
            }
        ]
    },
    ...
}

其他资源

特点：无需做任何处理，原样打包过去就行。

1
2
3
4
5
6
7
rules:[
{
    //排除
    exclude:/\.(css|js|html)$/,
    loader:'file-loader'
}
]

开发服务器（自动编译，自动刷新）

1
npm i webpack-dev-server -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    ...
    //在内存中编译打包，不会有输出
    //指令为npx webpack-dev-server
    devServe:{
        //要运行的代码目录
        contentBase:resolve(__dirname,'dist'),
        //压缩
        compress:true,
        port:3000,
        //自动打开浏览器
        open:true
    }
}

文件分类

项目中的文件是有分类的，比如js、css、img资源等。所以要想输出的资源也分门别类的放好，所以要加outputPath属性。

js 更改filename

1
2
3
4
output:{
    filename:'js/main.js',
    path:resolve(__dirname,'dist')
},

其他的用outputPath

在options中添加outputPath

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    test:/\.(jpg|png|gif)$/,
    loader:'url-loader',
    options:{
        //图片小于8kb，就会被base64处理
        limit:8*1024,
        name:'[hash:10].[ext]',
        outputPath:'res/imgs'
    }
},{
    //排除
    exclude:/\.(css|js|html|less|jpg|png|gif)$/,
    loader:'file-loader',
    options:{
        name:'[hash:10].[ext]',
        outputPath:'res/media'
    }
}

css文件不会有输出，因为css会被写入到js中去。

以上内容合并起来就是一个简单的webpack开发环境的配置。具体可以参考：https://gist.github.com/caoyangim/cb49b34bcf0dcf1d9ac9d3fdcc765480。

配置完成之后运行指令有两条，一个输出最终资源，一个直接展示成果：

webpack 和 npx webpack serve

生产（线上）环境要做的事

提取css成单独文件

[mini-css-extract-plugin][https://www.npmjs.com/package/mini-css-extract-plugin]:会生成单独的css文件。

css兼容性处理

[postcss-loader][https://www.npmjs.com/package/postcss-loader]：生成的css文件中会自动处理兼容性问题。

css压缩

optimize-css-assets-webpack-plugin

语法检查

eslint-loader eslint

检查规则在package.json中设置：这里用airbnb规则，用eslint-config-airbnb。

1
npm i eslint-loader eslint eslint-config-airbnb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//package.json中：
"eslintConfig":{
    "extends":"airbnb-base"
}
//webpack.config.jsz中
module:{
    rules:[
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            options:{
                //自动修复
                fix:true
            }
        }
    ]
}

js兼容性

[babel-loader][https://www.npmjs.com/package/babel-loader] 兼容es6语法到低版本浏览器

js压缩

mode:production 生产环境会自动压缩js

html压缩

Html-webpack-plugin

1
2
3
4
5
6
7
8
9
new HtmlWebpackPlugin({
    template:"./src/index.html",
    minify:{
        //移除空格
        collapseWhitespate:true,
        //移除注释
        removeComments:true
    }
})