2022-1-7
了解一下CMD模块化规范。（module.export={}相关规范） Require.js不通过config方法配置模块路径时，也可以做require时指定完整的引入路径（require([“./src/module.js”],function(one){})）; npm（node.js package manager） webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。
2022-1-8 入门基础：
loader，webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。 plugin：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
1.webpack安装（node.js环境） 包括webpack和webpack cli两个软件包。
全局安装（全局可用） npm install webpack webpack-cli –global //全局安装
当前目录安装 npm -init -y //初始化包配置文件 npm install webpack webpack-cli –save-dev //当前工作目录安装
2.webpack cli命令 –watch，监控文件内容改变，实时编译
3.webpack自定义配置（webpack.config.js），以下为demo const path = require(‘path’); module.exports = { /入口文件配置/ entry: ‘./path/to/my/entry/file.js’, /输出文件配置/ output: {
path: path.resolve(__dirname, 'dist'), /*输出的目录*/
filename: 'my-first-webpack.bundle.js', /*输出为文件名*/
clean:true,/*是否清理后输出*/
}, /loader,也称模块/ module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
}, /plugin/ plugins: [
/*自动生成html文件的插件*/
new HtmlWebpackPlugin({
template: './src/index.html',/*模板文件路径*/
filename:"app.html",/*输出文件名*/
inject:"body" /*脚本注入位置*/
})
], /开发模式/ mode:‘none’， /开发环境服务器先按照webpack-dev-server/ devServer: {
open: true,/*是否启用*/
host: "localhost",/*绑定的地址*/
}, };
3.webpack插件小试 4.资源模块 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
asset/resourceasset/inlineasset/sourceurl-loader a.Resource 资源 output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
/* 自定义资源输出的文件名*/ assetModuleFilename: ‘images/[hash][ext][query]’ }, module: {
/*创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。
这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。*/
rules: [
/*rule,每个规则可以分为三部分 - 条件(condition)，
结果(result)和嵌套规则(nested rule)。*/
{
/* test 属性，识别出哪些文件会被转换。*/
test: /.png/,
type: 'asset/resource'
}
]
},
b.inline资源：
不同于resouce输出路径，inline输出的事data url ，默认为base64编码后的data url
c.source资源：
针对TXT文件时，将会把txt的内容原样注入到输出文件中。
5.Loader（无需手动实例化相关对象） 6.plugin （需import引入，并实例化） 7.babel的使用 2022-1-8晚上 1.代码分离： module.exports = { //… optimization: {
splitChunks: {
// include all types of chunks
chunks: 'all',
},
}, }; import(“/main.js”).then(({main}=>{}));
2.缓存第三方库（optimization.splitchunks.cacheGroup） module.exports = { optimization: {
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[/]node_modules[/]|vendor[/]analytics_provider|vendor[/]other_lib/,
},
},
},
}, };
3.各种资源的输出目录：
js的目录在output配置项的filename中直接指定。 css在加载loader的配置项中指定。 assets资源模块在assetModuleFilename中指定。 每种模块可定义rules规则时可以单独定义filename打包到不同目录。
4.output公共目录
const path = require(‘path’); module.exports = { output: {
path: path.resolve(__dirname, 'public/assets'),
publicPath: 'https://cdn.example.com/assets/',
}, };
5.生产环境和开发环境 (mode配置项） 生成环境下插件会按自身的功能进行运转，开发环境下有些插件不会进行相关处理；可在命令行内传入相关变量，替换配置项：
npx webpack –env production //生成环境构建 npx webpack –env development //开发环境构建
–env global=123 ，也可以传递键值对，在webpack-config.js中使用函数形式的配置形式，函数参数为传入的命令参数（配置项中使用这些变量，实现动态参数构建）。函数参数为一个对象，所有传入的参数为该对象的属性。
6.构建时的JS压缩 TerserWebpackPlugin ，该插件使用 terser 来压缩 JavaScript。
npm install terser-webpack-plugin –save-dev
const TerserPlugin = require(“terser-webpack-plugin”); module.exports = { optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
}, };
7.不打包，直接引入外部资源 externals配置项用于将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
module.exports = { externals: {
jquery: 'jQuery',
}, };
2022-1-17晚上 前提：代码分离（代码拆分）一般是指抽离共同的代码，动态导入是使用时才会动态加载JS，
1.动态导入 import() 和静态导入的区别在于一个是运行前加载，一个是运行时加载。
2.懒加载 延迟加载（懒加载）或“按需”加载是优化站点或应用程序的好方法。这种做法本质上涉及在逻辑断点处拆分代码，然后在用户完成需要或将需要新代码块的操作后加载它。这加快了应用程序的初始加载速度并减轻了其整体重量，因为某些块甚至可能永远不会被加载。
3.预获取、预加载 2022-1-23晚上 1.import动态导入魔法注释（在声明 import 时，可使用的一些内置指令）： import(/* webpackPrefetch: true */ ‘./path/to/LoginModal.js’);
webpackChunkName：用于指定打包的名字； webpackPrefetch：是否预获取； webpackPreLoad：是否预加载；
细节总结
css里面的url图像，同样会被webpack进行构建。 css使用的font-face字体，可使用asset资源模块，test配置中匹配后自动构建。 同样的可通过使用loader对csv、xml（使用loader）yaml、taml（使用parser）等各种数据文件进行处理。
