这是我参与「第四届青训营 」笔记创作活动的第3天
一、什么是Webpack?
webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。
对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。
二、webpack的基本功能和工作原理
-
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
-
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
-
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
-
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
-
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
-
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
-
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
三、Webpack的安装跟使用
(1) 安装
npm i -D webpack webpack - cli
(2) 配置
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']
}]
}
}
(3) 执行编译命令
npx webpack
四、Webpack处理CSS
(1) 安装Loader
npm add -D css-loader style-loader
(2)添加module处理css文件
const path = require("path");
module.exports = {
entry: "./src/index",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
//css 处理器
rules: [{
test: /\.css/i,
use: ["style - loader ", "css-loader"]
}],
},
};
五、Loader 工作原理
webpack 只能直接处理 javascript 格式的代码。任何非 js 文件都必须被预先处理转换为 js 代码，才可以参与打包。loader（加载器）就是这样一个代码转换器。它由 webpack 的 loader runner 执行调用，接收原始资源数据作为参数（当多个加载器联合使用时，上一个loader的结果会传入下一个loader），最终输出 javascript 代码（和可选的 source map）给 webpack 做进一步编译。
