随笔分类 - WebPack
摘要：用html-withimg-loader 打包html里面通过src引入的图片时发错 这是因为它和html-webpack-plugin产生冲突； 原因是file-loader升级了，以前4.2的时候是没事的，现在file-loader升级到5.0了，所以需要在file-loader的options
阅读全文
摘要："export 'default' (imported as 'mui') was not found in '../publicjs/mui' 找了很多方法，最后发现是自己的失误，原因是我的mui.js中根本就没有导出mui，这样引用的时候就不能用 import mui from '../publ
阅读全文
摘要：plugin机制是webpack中另一个核心概念，它基于事件流框架tapable，通过plugin（插件）webpack可以实现loader所不能完成的复杂功能，使用plugin丰富的自定义API以及生命周期事件，可以控制webpack编译流程的每个环节，实现对webpack的自定义功能扩展。 首先
阅读全文
摘要：上篇文章我们实现了一个简易版的webpack，可以打包我们的js代码，但是还不能处理我们的 css、less、scss、图片等，这些都是需要loader和plugin来处理，所以，为了打包器更强大，需要增加loader和plugin的支持，接着我们就手写实现一个简单的loader 定义一个index
阅读全文
摘要：(function(modules) { // 缓存已经加载过的 module 的 exports var installedModules = {}; // _webpack_require 与 commonjs 的 require类似，它是 webpack加载函数，用来加载webpack定义的模
阅读全文
摘要：module：就是js的模块化webpack支持commonJS、ES6等模块化规范，简单来说就是你通过import语句引入的代码。 chunk: chunk是webpack根据功能拆分出来的，包含三种情况： 1、你的项目入口（entry） 2、通过import()动态引入的代码 3、通过split
阅读全文
摘要：一、多页应用的配置 const path = require("path"); const HtmlWpackPlugin = require('html-webpack-plugin') const htmlPluginHome = new HtmlWpackPlugin({ template:
阅读全文
摘要：webpack.config.js //解析路径 const path = require('path') // html挂载到内存的插件 const HtmlWebpackPlugin = require("html-webpack-plugin") ////抽离css 将css以link的形式引
阅读全文
摘要：作为webpack的初学者，你肯定也踩到了这个坑。 项目名称是 webpack，所以在初始化的时候会生成一个package.json文件，这个文件里有个name属性，他就是你的项目名称，当安装通过npm install webpack安装webpack 的时候就会报错，表示重名了。 把项目packa
阅读全文
摘要：安装babel-loader： npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 webpack.config.js配置： module: { rules: [ { test: /\.js$/, exclude:
阅读全文
摘要：目录结构： 引用图片： body { /*background: red;*/ /*background: url("../img/test2.jpg"); 小图片*/ background: url("../img/test.jpg"); /*大图片*/ } 安装url-loader和file-l
阅读全文
摘要：loader概念： 首先来介绍一下loader，之前我们用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将s
阅读全文
摘要：目录结构： 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package.json module.exports = { //导出入口和出口路径 entry: './src
阅读全文
摘要：目录结构： 入口文件：main.js 把项目所有的依赖文件都放进main.js //1.使用CommonJs的模块化规范 const {add, mul} = require('./mathUtil.js') console.log(add(20, 30)); console.log(mul(20,
阅读全文
