webpack用法及构建流程

webpack用法​

entry

webpack构建的入口，webpack根据入口文件找到依赖模块以及依赖的模块所依赖的模块。

// 单文件写法
entry: {
    index: '/app/index.js',
    about: '/app/about.js',
}

// 多文件写法，将多个文件打包到同一个bundle中
entry: {
    index: ['webpack-hot-middleware/client', '/app/index.js'],
    vendors: ['react', 'react-dom', 'redux', 'react-router'],
}

output

webpack的输出，指示webapck如何输出、以及输出到哪里、输出的格式等。

path：输出文件的目录。 filename：输出的文件名，一般跟entry配置相对应。
chunkFilename：块，非入口entry模块，会自动拆分文件，也就是常说的按需加载，与路由中的require.ensure相对应
publicPath：文件输出的公共路径

output: {
    path: path.resolve(__dirname, '/assets'),
    // entry中的文件对应的文件名
    filename: 'js/[name].js',
    // 动态加载的文件对应的文件名
    chunkFilename: 'js/[name].[chunkhash:8].js',
    publicPath: '/static/',
}

// 按需加载
// webpack会以'./chunk'为新的入口生成一个chunk
// 代码只有执行到import语句时，才会动态加载chunk对应的文件
// import返回一个promise对象，可以调用then方法接受返回值
import(/* webpackChunkName: 'chunkName' */ './chunk').then();

loader

​webpack只能解析js文件，loader赋予webpack将其他文件转化为webpack能解析的模块的能力。

test：正则表达式，匹配编译的文件
exclude：排除的文件
include：包含的文件
use > loader：相当于test匹配到的文件的解析器
use > options：配合loader使用，可以是字符串或者对象

modules: {
    rules: [
        {
            test: /\.jsx?$/,
            use: ['babel-loader'],
        },
        {
            test: /\.s?css$/,
            use: [
                'style-loader', 
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')],
                    },
                }, 
                'postcss-loader', 
                'sass-loader'
            ],
        }
    ],
}

plugin

webpack的插件，webpack在构建过程中，会在特定的生命周期广播特定的事件，plugin会监听webpack广播的事件，在收到感兴趣的事件后进行特定操作。

常用的webpack插件：
clean-webpack-plugin 删除打包目录中的文件
html-webpack-plugin 自动生成HTML模板，并将打包后的js文件插入HTML中。
mini-css-extract-plugin 提取css代码

webpack构建流程

1、初始化参数

从配置文件（webpack.config.js）和shell脚本读取合并参数，得到最终的参数。

2、开始编译

用上一步得到的参数初始化Compiler对象，加载所有配置的插件，通过执行对象的run方法开始执行编译。

3、确定入口

根据配置中的entry找出所有的入口文件。

4、编译模块

从入口文件出发，调用所有配置的loader对模块进行翻译，再找出该模块依赖的模块，递归本步骤直到所有入口文件所依赖的文件都经过处理。

5、完成模块编译

经过上一步骤之后，得到每个模块被翻译之后的最终内容和他们之间的依赖关系。

6、输出资源

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再将每个chunk转换成一个单独的文件加入输出列表中，这一步是可以修改输出内容的最后机会。

7、输出完成

在确定好输出内容之后，根据配置（webpack.config.js和shell）确定输出的路径和文件名，将文件内容写入到文件系统。