Webpack 知识体系｜青训营笔记

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

什么是 webpack

前端项目由各种资源组合而成： webpack 本质上是一种前端资源编译、打包工具。

webpack 的安装

关于webpack的基本使用，基本都围绕配置展开，而这些配置大致可划为两类： 流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置

工具类：主流程之外，提供更多工程化能力的配置项

安装

npm i -D webpack webpack-cli
//编辑配置文件 webpack.config.js
module.exports = {
    entry: 'main.js',
    output:{
        filename:"[name].js",
        path:path.join(__dirname,"./dist")
    },
    module:{
        rules:[{
            test:/\.less$/i,
            use:['style-loader','css-loader','less-loader']
        }]
    }
}
//在终端执行编译命令
npx webpack

核心流程

一些问题

Loader 有什么作用？为什么要用到 css-loader、style-loader loader 这里是用来转译过滤出来的文件的，在转译过程是需要调用对应的加载资源库，css-loader、style-loader 就是在转译时所需要的库.

与旧时代相比，在 html 维护 css 相比，这种方式有什么优劣之处 不需要再手动去维护HTML文件中的css代码，多出来的冗余操作可以丢掉.

Babel 具体有什么功能 Babel 是一个 JavaScript 编译器，我们很多类型的代码文件单独拎出来其实是不能跑的。比如 react 中的JSX，react也是在脚手架中直接引入 Babel 编译器，把 JSX 代码解析成JS代码。所以 Babel 就是把一些其他类型的代码编译成 JS。

Babel与Webpack分别解决了什么问题？为何两者能协作到一起 Babel 是来解析代码变成 JS 代码，webpack 是用来打包压缩整合代码的工具。在 webpack 中有个东西叫loader，loader 需要解析到很多代码文件，两者有同样的应用场景，因此用到出现 babel-loader 其实并不奇怪。

相比于手工维护 HTML 内容，这种自动生成的方式有什么优缺点 在传统项目中，每次对项目打包后我们都需要手动在 index.html 添加 js 的链接，当打包后的 js 入口文件名更改时，我们又需要再一次修改 index.html 中的 js。但是用自动生成的方式即可避免这种问题。