WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源

核心概念

入口(entry)

入口起点(entry point)指示webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js

输出(output)

output 属性告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

loader (加载器)

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块。

在 webpack 的配置中 loader 有两个属性：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

插件(plugin)

plugins(插件)作用更大，可以打包优化，资源管理和注入环境变量

模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

基本配置

以安装css-loader和安装html-webpack-plugin举例

安装 css-loader

安装 style-loader 和 css-loader

1

npm i -D style-loader css-loader

安装 html-webpack-plugin

1

npm i -D html-webpack-plugin

修改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

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');  

module.exports = {
    mode: 'development', // "production" | "development" | "none"
    entry: './entry.js', //入口文件 默认为 './src/index.js'
    output: { // webpack 如何输出结果的相关选项
        path: path.resolve(__dirname, 'dist'), // 输出文件的目标路径 必须是绝对路径
        filename: 'foo.bundle.js' //打包后输出文件的文件名
    },
    module: { // 关于模块配置
        rules: [ // 模块规则（配置 loader、解析器等选项）
            {
                test: /\.css$/, // 以.css结尾的文件
                use: ['style-loader', 'css-loader'] // 使用这些loader处理
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "/index.html",  // 生成的模板文件的名字 
            template: "index.html" // 模板来源文件 
        })
    ]
};

常用的loader和plugin

常见的Loader

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• image-loader：加载并且压缩图片文件
• babel-loader：把 ES6 转换成 ES5
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• eslint-loader：通过 ESLint 检查 JavaScript 代码

常见的plugin

• define-plugin：定义环境变量
• html-webpack-plugin：简化html文件创建
• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
• webpack-parallel-uglify-plugin: 多核压缩,提高压缩速度
• webpack-bundle-analyzer: 可视化webpack输出文件的体积
• mini-css-extract-plugin: CSS提取到单独的文件中,支持按需加载

参考链接

前端面试与进阶指南

webpack官网文档

webpack 从入门到放弃(一)