webpack简介

webpack是一个模块化打包工具（前端自动化构建工具）

webpack作用

        因为浏览器不支持我们在开发时使用的前端模块化（AMD、CMD、CommonJS、ES6），所以我们要借助webpack打包工具将项目模块化文件打包生成普通脚本文件,引入到html中，并且在打包的过程中，还可以对资源进行处理，比如压缩图片，把scss/less转成css，把ES6语法转成ES5语法，把TypeScript转成JavaScript等等操作。

webpack使用流程

1.webpack安装：

cnpm install webpack webpack-cli -g；

新建一个src文件，在其目录下新建一个main.js入口文件（如果都已经生成存在则不用管）

2.初始化项目包

npm init -y 

 生成package.json

3. 本地安装webpack依赖

cnpm install webpack webpack-cli --save-dev

4.创建最外层的webpack.config.js，改变默认设置

作用：是为了方便不用每次打包的时候都输入目录地址，而是直接webpack即可

let path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    mode:'development',
    // 入口使用相对路径
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"bundle.js",
        // 重新打包后清除上次残留的文件
        clean:true
    },
    // 插件：
    // 1.重新打包后自动生成一个h5文件
    // 2.一个可视化工具可查看依赖关系
    plugins:[new HtmlWebpackPlugin(),new BundleAnalyzerPlugin()],
    // loader
    module:{
        //  
        rules:[
            {
                // 正则表达式
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            },
            {
                test:/\.s[ac]ss$/,
                // 注意顺序
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

5.安装HtmlWebpackPlugin 

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中

npm install --save-dev html-webpack-plugin

6.安装webpack-bundle-analyzer

这是一个可视化图形插件，用来分析模块化大小

 npm install webpack-bundle-analyzer --save-dev

7.安装splitChunks

抽离公共重复的依赖 单独放在一个脚本文件 优化前端性能 

无需安装，写在webpack.config.js 中与entry入口文件同一级的位置

optimization:{
        // 插件：将重复依赖提取到更公共文件中
        splitChunks: {
            chunks: "async",
        }    
    }

8. 两种打包方法

webpack ./src/main.js -o ./dist/bundle.js --mode:development //开发模式
webpack ./src/main.js -o ./dist/bundle.js --mode:production //生产模式  

 webpack中四个核心：

1. entry：“项目入口文件”、
2. output：“输出文件”、
3. plugins:[插件]、
4. loader（可以设置非js文件的转换规则）

面试问点：

简述一下webpack的打包流程

1.初始化一个管理包

2 、安装使用webpack所需要的依赖包

3、 在package.json文件中配置scripts(自定义命令)

scripts: {
    "build": "webpack"
}

4、在项目根目录下新建webpack.config.js文件并配置，指定打包的入口和出口

5、将新建的打包文件引入webpack的指定的打包入口src/index.js中

6、在根目录下执行yarn build命令打包