关于前端:webpack

37次阅读

共计 719 个字符，预计需要花费 2 分钟才能阅读完成。

首先是编译 loader：针对 jsx,ts, 等的 js 通过 babel 编译，针对 less,sass 等的 css 编译.
文件打包：个别通过打包压缩 ugliyJS
模块化：依赖，网络请示

webpack 是一个前端资源动静加载 / 打包工具，会剖析模块的依赖，并将模块依据指定规定生成动态资源。

首先 webpack 是 js 代码，js 是须要在运行环境下能力运行的，那咱们的 webpack 就是在 nodejs(后端服务器) 中运行的。

配置结尾的 require, 用的就是 node 的内置模块,require 是运行 webpack 时调用.
为什么不必 import 是因为，import 是编译时调用，是解构过程，它也是 es6, 须要转换成 es5 再执行，import 会转码成 require.
webpack 的配置文件内容是不通过编译的。

loader 是用来编译解决源文件的，比方 es6,ts,less 等都要通过 loader 编译成浏览器辨认的语言。

loader 的执行程序：从下往上，从右往左。
loader 的其它配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

plugins: [new HtmlWebpackPlugin({ title: '治理输入'}),// 生成新的 html 文件，并把打包好的 js 文件引入
    new CleanWebpackPlugin(),// 清理 dist 文件夹]

SplitChunksPlugin 拆散包

正文完