webpack认知篇

1、用一句话概括webpack是什么：webpack是一个模块打包工具。

2、Module（模块）

javascript、图片、文字、json文件等任何类型的源文件都是一个个模块，webpack引用模块的方式有一下几种：

import方法（es5）
require()方法（CommonJs）
define 和require语法（AMD）
css/sass/less文件中的@import语法
url(...)和<img src=...>中的图片路径

3、Dependency Graph（依赖关系图）

webpack根据每个模块之间的依赖关系递归生成的一张内部逻辑图，根据这张逻辑图，webpack将所有需要的模块打包成一个bundle文件。

4、Entry（入口）

依赖关系图的起始文件被称为entry。默认的entry是'./src/index.js'，可以自行修改，可以是一个或多个

单个entry:

module.exports = {
    entry: './src/index.js'
}

或者：

module.exports = {
    entry: {
        main: './src/index.js'
    }
}

多个entry，一个chunk

可以指定多个独立的文件为entry，但将它们打包到一个chunk中，此方法被称为multi-main entry，我们需要传入文件路径的数组：

module.exports = {
    entry: ['./src/index.js', './src/index2.js', './src/index3.js']
}

多个entry，多个chunk

如果有多个entry，并且每个entry生成对应的chunk，我们需要传入object：

module.exports = {
    entry: {
        app: './src/index.js',
        admin: './src/admin.js'
    }
}

这种写法的好处是有灵活性和扩展性，支持和其他的局部配置进行合并。

5、OutPut（出口）

出口就是webpack打包完成的输出，output定义了输出的路径和文件名称，默认的输出路径为./dist/main.js，可以在配置文件中进行配置：

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }
}

多个entry

当有多个entry时，一个entry就对应一个output，此时输出的文件名需要使用替换符声明以确保文件名唯一，例如使用入口模块的名称：

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

最终在./dist路径下面会生成app.js和search.js两个bundle文件。

6、Loader（加载器）

webpack自身只支持加载js和json模块，而webpack的理念是让所有的文件都能被引用和加载并生成一来关系图，所以loader出场了。loader能让webpack能够去处理其他类型的文件（比如图片、字体文件、xml）。我们可以在配置中定义这样一个loader：

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    }
}

其中test定义了需要被转化的文件或文件类型，use定义了对该文件进行转化的loader类型。webpack打包时遇到txt文件的引用，会先用raw-loader转化一下再打包进bundle。

其他各类包括：css-loader、file-loader、html-loader、vue-loader、babel-loade等等

7、Plugin（插件）

plugin和loader是两个比较容易混淆的概念。loader是用来转换和加载特定类型的文件，所以loader的执行层面是单个源文件。而plugin可以监听webpack处理过程中的关键事件，深度集成进webpack的编译器，执行层面是整个构建过程。plugin系统是构成webpack的主干，webpack自身也基于plugin系统搭建，webpack有丰富的内置插件和外部插件，并且允许用户自定义插件。

与loader不同，使用plugin我们必须要先引用改插件：

var webpack = require('webpack'); // 用于引用webpack内置插件
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件

module.exports = {
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}

猜你喜欢