陈小陈的博客

package.json{ "name": "webpack-domo", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.0.1", "file-loader": "^6.2.0", "html-loader": "^1.3.

WebpackDevServer每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，可以通过安装 webpackDevServer 来改善这方面的体验。npm install --save-dev webpack-dev-server启动命令：npx webpack-dev-server或者，package.json 中添加 scripts...,"scripts": { "server": "webpack-dev-server"}修改 webpack.con

Plugins扩展 webpack 本身的一些功能，它们会运行在 webpack 的不同阶段（钩子 / 生命周期）。HtmlWebpackPlugin在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中。npm install --save-dev html-webpack-plugin// webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");mo

引入非js文件打包在 webpack 中，有一个很重要的特性：模块不仅仅只是 js 的文件，webpack 可以把任意文件数据作为模块进行处理，包括：非 js 文本、css、图片等等。import txt from './a.txt';console.log(txt);但是 webpack 默认情况下只能处理 js 模块，如果需要处理其它类型的模块，则需要使用它提供的一些其它功能执行简要流程loaders：webpack 中非常核心的内容之一，非 js 类型的模块处理就靠loaders

webpackwebpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。官⽅网站（英文）中⽂网站1、安装webpack 是一个使用 Node.js 实现的一个模块化代码打包工具。 npm install -D webpack webpack-cli注：

模块化独立的作用域与依赖关系处理；降低程序复杂性；提高代码的重用；利于团队协作开发与后期的维护和扩展。基于 JavaScript 的模块系统分类CommonJS（适用于服务端）AMD/CMDUMDESM（EcmaScript Module）CommonJS在早起前端对于模块化并没有什么规范，反而是偏向服务端的应用有更强烈的需求，CommonJS 规范就是一套偏向服务端的模块化规范，NodeJS 就采用了这个规范。一个文件就是模块，拥有独立的作用域。导出内部数据通过