前端面试—Webpack的构建流程

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

1. 初始化package.json

npm init

2. 安装webpack webpack-cli

npm install webpack webpack-cli --save

3. 在项目根目录添加webpack.config.js
4. 配置打包入口entry、指定输入文件名称、指定输出目录、设置工作模式等

module.exports = {
    mode:'development', // 开发模式
    entry: './src/main.js',// 入口文件
    output: {
        filename: 'bundles.js',// 输出文件名称
        path: path.join(__dirname, 'output') // 输出目录
    }
}

5、配置处理各类资源文件的loader(专注实现资源模块加载)，例如：

module: {
    rules: [
        {
            test: /.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /.vue$/,
            exclude: /node_modules/,
            loader: 'vue-loader'
        },
        {
            test: /.less$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'less-loader',
                    options: {
                        lessOptions: {
                            strictMath: true
                        }
                    }
                }
            ]
        },
        {
            test: /.(png|jpg|jpeg)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        esModule: false,
                        limit: 10 * 1024
                    }
                }
            ]
        }
    ]
},

6、配置plugin（解决项目中除了资源加载以外的自动化工作），例如：

1. 清除dist目录
2. 拷贝静态文件至输出目录
3. 压缩输出代码
4. webpack+plugin 实现大多数前端工程化工作

7、配置打包命令、执行打包

"scripts": {
    "server": "npx webpack serve --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
}

通过webpack.config.js配置文件的entry入口配置开始查找项目依赖资源，根据配置的loader解析不同的资源，输出打包后的资源。

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

loader是处理各类资源文件，专注实现资源模块加载。

开发思路：

• 新建 loader.js 通过module.export 导出一个函数，函数通过source（即要处理的资源文件）参数输入，通过return输出
• 编写匹配规则
• 在函数体中处理资源(loader里配置响应的loader后)
• 通过return返回最终打包后的结果(这里返回的结果需为字符串形式)

plugin是解决项目中除了资源加载以外的自动化工作，比如拷贝静态资源、清空打包后的文件夹等。

开发思路：

• 通过钩子机制实现
• 插件必须是一个函数或包含apply方法的对象
• 在方法体内通过webpack提供的API获取资源做响应处理
• 将处理完的资源通过webpack提供的方法返回该资源