忘川的博客

常见的loader 1.file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 2.url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去 3.source-map-loader：加载额外的 Source Map 文件，以方便断点调试 4.image-loader：加载并且压缩图片文件 5.babel-loader：把 ES6 转换成 ES5 6.css-loader：加载 CSS，支持模块化、压

context 基本目录，一个绝对路径，用于从配置中解析入口点和加载器。 默认情况下，使用当前目录，但是建议在配置中传递一个值。这使您的配置独立于CWD（当前工作目录）。 context : path.resolve(__dirname,"src") output output : { library : "aaa", libraryTarget : "this" }, library :打包的结果，会将立即执行函数的执行结果赋值给aaa libraryTarget :配合library更加精

loader loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！ loader相当于一个模块转换器，用于将模块的原内容按照需求转换成新

mode模式 mode模式有两个值，分别是production、development。production是生产模式，development是开发模式，默认为production。 development 模式下，将侧重于功能调试和优化开发体验，包含如下内容： 1.浏览器调试工具 2.开发阶段的详细错误日志和提示 3.快速和优化的增量构建机制 production 模式下，将侧重于模块体积优化和线上部署： 1.开启所有的优化代码 2.更小的 bundle 大小 3.去除掉只在开发阶段运行的代码 4.Sco

webpack的安装和使用 1.webpack是什么 webpack是一个基于模块化的打包工具，把一切都视为模块。它是通过开发时态的一个入口模块为起点，分析出里面的依赖关系，然后通过打包和压缩最终形成一个运行时态的文件。 2.webpack的特点 （1）为前端工程化而生 （2）简单易用 （3）生态圈强大 （4）基于模块化和node.js 3.webpack的安装 webpack：核心包 包含webpack构建过程中所有需要用到的api npm install webpack --save-dev webp