原创 webpack配置resolve屬性
resolve屬性配置 let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); let {CleanWebpackPl
2020-02-29 19:39:45
原创 分析webpack中使用的Tapable——異步鉤子實現及模擬實現
tapable webpack本質上是一種事件流的機制，他的工作流程就是將各個插件串聯起來，而實現這一切的核心就是tapable， tapable有點類似於nodejs的events庫，核心原理也是依賴於發佈訂閱模式： 繼承了很多
2020-02-29 19:39:35
1
原创 手寫webpack——實現loader的功能
實現loader zf-pack.js let fs = require('fs'); let path = require('path'); let babylon = require('babylon'); let trave
2020-02-29 19:39:35
原创 webpack中自帶的打包優化
webpack自帶的優化 index.js文件 // import jquery from 'jquery' import calc from './test.js'; // import 在生產環境下，會自動去除沒用的代碼 /
2020-02-29 19:39:35
原创 webpack打包多應用
打包多頁應用 webpack.config.js let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); module
2020-02-29 19:39:35
原创 webpack抽取公共代碼
抽取公共代碼 let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); let webpack = require('w
2020-02-29 19:39:35
原创 手寫webpack
手寫webpack 我們來手動實現一個簡易的webpack， zf-pack 開發方式 新建一個倉庫，然後執行npm link即可 在需要構建的項目下面，執行npm link zf-pack package.json配置 {
2020-02-29 19:39:35
原创 實現file-loader與url-loader
file-loader實現 file-loader.js: let loaderUtils = require('loader-utils'); function loader(source) { let filenam
2020-02-29 19:39:35
原创 webpack實現常用loader
實現常用loader 概念：什麼是loader？ webpack只能處理javascript的模塊，如果要處理其他類型的文件，需要使用loader進行轉換，loader是webpack中的一個重要概念 ，它是指用來將一段代碼轉換成
2020-02-29 19:39:35
原创 實現css-loader、less-loader、style-loader
less-loader less-loader.js let less = require('less'); function loader(source) { let css; less.render(sourc
2020-02-29 19:39:35
原创 實現FileListPlugin插件
實現FileListPlugin插件 FileListPlugin.js class FileListPlugin { constructor({filename}) { this.filename = f
2020-02-29 19:39:35
原创 webpack定義環境變量
定義環境變量 使用webpack.definePlugin let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); l
2020-02-29 19:39:35
原创 webpack熱更新
熱更新 只有更新某個模塊的時候，只更新該部分，不刷新頁面，是一種增量的更新 webpack.config.js let path = require('path'); let HtmlWebpackPlugin = require
2020-02-29 19:39:35
原创 webpack處理js語法及校驗
處理js語法及校驗： 如何去優化和兼容一些高級語法 yarn add @babel/plugin-transform-runtime yarn add @babel/runtime yarn add @babel/polyfil
2020-02-28 17:09:11
原创 webpack打包圖片
打包圖片 1、在js中創建圖片來引入 yarn add file-loader url-loader -D webpack.config.js module.exports = { module: {
2020-02-28 17:09:11