Smart_J_King的博客

Bundler 源码编写模块分析在项目 src 文件夹下建立下面三个文件：word.jsexport const word = 'hello';message.jsimport { word } from './word.js';​const message = `say ${word}`;​export default message;index.jsimport message from './message.js';​console.log(messa

webpack.config.jsconst path = require('path')const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')​module.exports = { mode: 'development', entry: { main: './src/index.js' }, plugins: [ new Copyri...

index.jsconsole.log('hello webpack')replaceLoader.js// 不能写成箭头函数，只能写显示的 function 声明函数，不然会有 this 指向问题module.exports = function(source) { return source.replace('loader', 'compiler loader')}replaceLoaderAsync.js// 在 webpack.config.js 配置的 opt..

webpack.config.jsconst path = require('path');const fs = require('fs');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');const AddAssetHtmlWebpackPlugin = require('add-asset-html-web.

1.跟上技术的迭代（Node, Npm, Yarn）对Webpack、Node、Npm、Yarn等技术进行版本的升级，相关技术的版本更新，官网都会做出优化，升级技术可以一定程度的提高打包的性能2.在模块上尽可能少的应用 Loader合理的使用 exclude / include 可以降低使用 loader 的频率从而提高打包速度，如 exclude: /node_modules/ 因为 node_modules 中的代码是已经被转换过的代码，可以不必使用 loader 做二次转换。也即尽可能的让

项目中安装 EsLint ：npm install eslint -S快速生成 EsLint 的配置文件：npx eslint --init运行命令后根据相关选项进行设定，成功操作后会在 src 下看到名为 .eslintrc.js的配置文件，在配置文件中可进行相关语法规范规则的编写。.eslintrc.jsmodule.exports = { "extends": "airbnb", "parser": "babel-eslint"}babel-esli...

使用 HTML5 History API 时，可能必须提供 index.html 页面来代替任何 404 响应。通过设置devServer.historyApiFallback 为 true 来启用 ：webpack.config.jsmodule.exports = { // ... devServer: { historyApiFallback: true }}可以通过提供一个对象，对 rewrites这样的配置项进一步控制：module.e

webpack.config.jsmodule.exports = { // ... devServer: { proxy: { '/api': 'http://localhost:3000' } }}对路径 /api/users的请求将会被代理到 http://localhost:3000/api/users。如果不希望传递 /api ，可以进行重写路径：webpack.config.jsmodule...

一、TypeScriptTypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts ，需要安装特定的 loader 来转换 ts 语法。1.1 依赖安装npm install typescript ts-loader -D1.2 webpack.config.jsconst path = require('path')​module.exports = { mode: 'develo..

安装 http-server:npm install http-server -D使用 http-server可以模拟实现服务器效果package.json中配置命令，在 dist 目录下开启一个 http-server{ ... "scripts": { "start": "http-server dist" ... }}PWA(Progressive Web Application)，当客户端第一次成功访问成功网页后，服务...

webpack 除了能够打包项目应用以外，还可以用来打包 JS 库。当其他人安装我们的库时，他们可能会在不同的环境中去引入，例如：import lib from 'lib' // ESM 的引入方式​const lib = require('lib') // CommonJS 的引入方式​require(['lib'], function () {}) // AMD 的引入方式二、步骤2.1 库代码假设设计了一个这样一个简单的库：// math.jsconst add.

webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常约定用于定义环境类型）。webpack --env.NODE_ENV=local --env.production --progresspackage.json{ ... "scripts": { "bundle"...

webpack与浏览器缓存(caching)我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器

CSS 也可以从主文件中分离出来，默认情况下CSS打包后会被添加在 html 的 style 标签中。如果 CSS 代码有很多行，那么直接嵌入在 html 文件中是不合适的，我们希望它是以 <link>标签的形式去插入到 head 标签中，也就是外部引入 CSS 文件的形式。首先安装插件：npm install --save-dev mini-css-extract-plugin注意： 它要配合 css-loader 使用, 之前使用的 style-loader 去掉，此项配置

预获取 prefetch: 在浏览器加载完必要的资源后，空闲时就会去获取可能需要的资源。预加载 preload: 预先加载当前页面可能需要的资源， 它会与必要资源并行请求。import(/* webpackPrefetch: true */ './asets/js/click')上述代码会在所有必要资源加载完成后，网络空闲就预先获取添加了魔法注释的异步模块。import(/* webpackPreload: true */ 'ChartingLibrary');module

可以通过运行 webpack --profile --json > stats.json 来生成此工具所需的 JSON 文件{ ... "scripts": { "bundle": "webpack", "watch": "webpack --watch", "dev": "webpack-dev-server --config ./build/webpack.dev.config.js", "build": "webpack --config ....

代码分离(Code Splitting)// index.jsimport _ from 'lodash';const ele = document.createElement('div');ele.innerHTML = _.join(['Code', 'Splitting'], '---');document.body.appendChild(ele);以上代码中，在开头同步引入了 lodash ，这没什么问题，但是一旦这个 index.js 文件很大，只要 index.js 中代码一

Development 和 Production 模式的区分打包在不同模式下的配置上，存在着大量相同的代码，对于这些重复代码可以将它们分离出来共用，提高代码效率。1.webpack-merge插件安装：npm install webpack-merge -D这个插件可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就可以节约大量代码的书写。(1)共用配置新建一个文件 webpack.common.config.js （文件名可以自己起），用于编写共

Tree Shaking在文件或者在组件文件中引入其他模块中的代码，但实际上我们只用到其中的一部分，剩下的代码则不需要引入，然而在默认情况下，webpack仍然是全部引入并打包的。这时，为了把多余部分剔除出去，就要用到 “ Tree Shaking ” 了，也就是摇树。经过 Tree Shaking，不该留在代码中的多余代码，则会被摇掉，这样能减轻代码量，提高性能。Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。 ESM: export +

有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好，这时就需要将新的语法转换成 ES5 标准的语法，让浏览器正常识别它们，保证程序的稳定运行。1.依赖安装npm install -D babel-loader @babel/core @babel/preset-env2.Loader设置webpack.config.jsmodule: { rules: [ { test: /\.m?js$/, exclude: /node_module...

热模块更新HRM(Hot Module Replacement)运行 npm run start，此时，我们尝试对文件进行修改，然后回到页面，你会发现终端内 webpack 帮我们重新编译了代码，然后它会自动刷新，刷新后的页面被重置，之前在页面上的操作不见了，又要重新开始。我们想要的效果是，当文件修改重新编译后，页面不要全部刷新，只是响应发生变化的那一部分。这时候就要用到 HMR，热模块替换。注意：HMR 相当于 dev Server 的辅助，同样只用在开发环境，不要用在生产环境中！！！

使用 WebpackDevServer在通过 Loaders 处理完静态资源以及 Plugins 快捷打包后，我们基本就能愉快地打包文件了。这时，又遇到了新的问题，什么问题呢？那就是，我们只有在打包完之后，运行代码才能看到打包的结果。在开发过程中，我们希望的是自动打包，让我们边写代码边看到修改代码后的效果，而不是每次都手动打包。1. watch （监听模式）监听文件变动，变动则重新打包，输出目录中可以看到新的打包文件。在 package.json 中设置脚本。package.

Entry与Output的基础配置module.exports = { ... entry: { main: './src/index.js', sub: './src/index.js' }, ... output: { filename: '[name].js', // 输出文件的名称 path: path.resolve(__dirname, 'dist') }}index.ht...

plugin的使用plugin 可以在 webpack 运行到某个时刻的时候，帮助实现一些事情。htmlWebpackPlugin 会在打包结束后自动生成一个html文件，并把打包生成的js自动引入到这个html文件中。插件安装：npm install --save-dev html-webpack-pluginwebpack.config.js配置在plugins选项数组中添加插件const HtmlWebpackPlugin = require("html-webpack

关于Loaderloader 用于对模块的源代码进行转换。loader 可以在 import 或 "load(加载)" 模块时预处理文件。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许直接在 JavaScript 模块中 import CSS 文件！loader其实就是一个打包的方案，它指导某一个特定的文件webpack如何进行打包。file-loader 当发现代码中引入静态资源文件模块

定义webpack是一个模块打包工具。有一些语法，如 ES Module 模块引入方式， import ... from '...'的语法，浏览器并不能识别，webpack 能将这些语法进行转换翻译使得浏览器能识别、正确的运行代码。1.ES module 模块引入方式a.jsfunction fun() { ... }export default = fun;b.jsimport fun from './a.js'new fun();2.CommonJS 模块.