这是我参与「第四届青训营」笔记创作活动的第16天

学习`webpack`

为什么要学习`webpack`？

理解前端“工程化”概念、工具目标。
一个团队总要有那么几个人熟悉webpack，某种程度上可以成为个人的核心竞争力。
高阶前端必经之路。

什么是`webpack`

webpack本质上是一个前端资源编译、打包工具。

多份资源文件打包成一个Bundle
支持Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持HMR + 开发服务端
支持持续监听、持续构建
支持代码分离
支持Tree-Shaking
支持Sourcemap等

使用`webpack`

`webpack`使用步骤

安装webpack

npm i -D webpack webpack-cli

编辑配置文件

module.exports = {
    entry: 'main.js',//入口文件
    output:{//打包完之后放在什么地方
        filename:'',//打包之后的文件名
        path:path.json(__dirname,'./dist'),//打包之后的路径
    }
}

执行编译命令

npx webpack

`webpack`核心流程

入口处理：从“entry”文件开始，启动编译流程。
依赖解析：从“entry”文件开始，根据“require”或“import”等语句找到依赖资源。
资源解析：根据“module”配置，调用资源转译器，将png、css等非标准JS资源转译为JS内容。
资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件，并进行代码混淆和代码压缩。

`webpack`配置

关于webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类

流程类：作用于流程中某个或者若干个环节，直接影响打包效果的配置项。
- 输入：‘entry’入口文件、‘context’webpack运行时从什么地方找资源；
- 模块解析：‘resolve’、‘externals’；
- 模块转译：‘module’；
- 后处理：‘optimization’、‘mode’、‘target’。
工具类：主流程之外，提供更多工程化能力的配置项。
- 开发效率类：“watch”、“devtool”、“devServer”；
- 性能优化类：“cache”、“performance”；
- 日志类：“stats”、“infrastructureLogging”。

使用`webpack`——`CSS`处理

module:{
    rules:[{
        test:/\.css$/,
        use:['style-loader','css-loader']
    }]
}

使用`webpack`——接入`Babel`

安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

配置文件

module:{
    rules:[{
        test:/\.js?$/,
        use:[{
            loader:'babel-loader',
            options:{
                presets:[
                    [
                        '@babel/preset-env'
                    ]
                ]
            }
        }]
    }]
}

执行‘npx webpack’

使用`webpack`——生成`HTML`

安装依赖

npm i -D html-webpack-plugin

配置文件

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:"./src/index",
    output{
        filename:"[name].js",
        path:path.join(__dirname,"./dist")
    },
    plugins:[new HtmlWebpackPlugin()]
};

使用`webpack`——`HMR`

Hot Module Replacement模块热替换

开启HMR
webpack.config.js

module.exports = {
    //...
    watch:true,
    devServer:{
        hot:true
    },
};

启动webpack
```
npx webpack serve
```

使用`webpack`——`Tree-Shaking`

Tree-Shaking是将项目没有用到的代码删掉

开启Tree-Shaking：

module.exports = {
    entry:"./src/index",
    mode:"production",
    optimization:{
        usedExports:true
    },
};

进阶：理解`Loader`

webpack只认识JS代码，为了处理非标准JS资源，设计出资源翻译模块——Loader用于将资源翻译为标准JS。

使用`loader`

以less文件为例：

安装loader

npm add -D css-loader style-loader less-loader

添加‘module’处理css文件

module.exports = {
    module: {
        rules:[{
            test:/\.less$/i,
            use:[
                "style-loader",
                "css-loader",
                "less-loader",
            ],
        },],
    },
};

less-loader：实现less到css的转换。
css-loader：将CSS包装成类似modules.exports="${css}"的内容，包装后的内容符合JavaScript语法。
style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签。

`loader`的特点：

链式执行；
支持异步执行；
分normal、pitch两种模式。

进阶：理解插件

插件的使用

安装插件

npm i -D webpack-dashboard

导入插件

const DashboardPlugin = require('webpack-dashboard/plugin');

配置文件

module.exports = {
    plugins:[new DashboardPlugin()];
}

如有错误，还望指正

学习webpack | 青训营笔记

学习webpack

为什么要学习webpack？

什么是webpack

使用webpack

webpack使用步骤

webpack核心流程

webpack配置

使用webpack——CSS处理

使用webpack——接入Babel

使用webpack——生成HTML

使用webpack——HMR

使用webpack——Tree-Shaking

进阶：理解Loader

使用loader

loader的特点：