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

01什么是 Webpack

实际的前端开发：

模块化（js 的模块化、css 的模块化、其它资源的模块化
组件化（复用现有的 UI 结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
自动化（自动化构建、自动部署、自动化测试）

webpack 是一个用于现代 JavaScript 应用程序的静态模块化打包构建工具本质上是一种前端资源编译、打包工具

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

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

核心流程-----极度简化版

模块化 + 一致性

多个文件资源合并成一个，减少 http 请求数
支持模块化开发
支持高级 JS 特性
支持 Typescript、CoffeeScript 方言
统一图片、CSS、字体等其它资源的处理模型
Etc..

使用 Webpack -- 流程类配置

Webpack 的扩展方式

使用Loader

安装 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",
           ],
          },
         ],
        },
    };

认识 Loader: 链式调用

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

理解插件

插件是什么?

很多知名工具，如 VS Code、Web Storm、Chrome、Firefox Babel、Webpack、Rollup、EslintVue、Redux、Quill、Axios等等，都设计了所谓“插件”架构

Webpack 知识体系 | 青训营笔记