webpack
webpack
richest_qi
这个作者很懒,什么都没留下…
展开
-
【webpack】Error: Cannot find module webpack-cli/bin/config-yargs
本问题解决方法来自于网友问题描述{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --open webpack --config webpack.config.js", "build": "webpack --config webpack.config.js" }, "key原创 2020-10-27 21:21:09 · 210 阅读 · 0 评论 -
【webpack】去console
要去除最终包中的一堆console,使用插件babel-plugin-transform-remove-console安装插件npm install --save-dev babel-plugin-transform-remove-console使用插件plugins:[ ["transform-remove-console",{ "exclude":["log"] }] ]仅保留console.log,去除其他所有console。const path = require("path");原创 2020-09-27 10:48:03 · 1896 阅读 · 0 评论 -
【webpack】img[src]图片加载遇坑记
gg原创 2020-08-24 19:21:31 · 773 阅读 · 0 评论 -
【webpack】动态entry
const fs = require("fs");const asyncReadDir = (url) => { return new Promise(resolve => { fs.readdir(url,'utf8',(err,files) => { const entryObj = {}; files.forEach(filename => { entryObj[filen原创 2020-08-02 14:28:00 · 346 阅读 · 0 评论 -
【webpack】图片加载
file-loadermodule.exports = { module:{ rules:[ { test:/\.(gif|png|svg)$/, use:['file-loader'] } ] }}#logo{ margin:30px auto 0; background-image:url(../../../asset.原创 2020-07-30 16:23:01 · 916 阅读 · 0 评论 -
webpack之代码分离
代码分割懒加载按需加载//math.jsexport function add(x,y){ return x+y;}//index.jsimport('./math.js').then (math => { console.log(math.add(1,2));})原创 2020-07-05 14:07:17 · 879 阅读 · 0 评论 -
webpack之resolve
webpack从entry开始递归解析所有依赖的模块,而怎么找到这些模块对应的文件,怎么更准确更快地找到这些模块所在文件,这就是resolve擅长的了。我们来了解下。resolve.modules默认值是["node_modules"], 意思是,webpack默认先去 当前目录的node_modules里找模块,要是没找着,就往上一级目录的node_modules找,还没找着,就继续往上,直到找到为止。要是到头了还是没找着,那说明根本没这模块。比如,我们会这样启动weback调试,node --i原创 2020-07-03 21:50:41 · 2653 阅读 · 0 评论 -
webpack之 tree shaking
tree shaking 是干嘛直译是摇树,呃? 干嘛要 摇树?webpack中文网是这样做比喻的。一棵树上,有生命力强劲的绿叶,也有等待凋落的枯叶,摇动树,枯叶方可落地,整棵树看起来才春意盎然。一个应用程序就好比一颗树,用到的代码就是绿叶,没有用到的 徒增包体积 的代码就是枯叶,因此 有必要 把没用的代码排除出最终的包,这样就可以缩小包体积了。而 把将用不到的代码排除出最终的包,就需要 tree shaking。那问题来了,怎么 shaking?怎么shaking要shaking,有个前提原创 2020-06-28 10:19:33 · 865 阅读 · 0 评论 -
webpack之输出结果分析
两步走。项目根目录下webpack --profile --json > stats.json,生成stats.json文件--profile,记录构建的耗时信息;--json,输出结果以JSON格式保存;> stats.json,输出结果保存在stats.json文件中。一个前提:全局安装了webpack, npm install -g webpack一个必须:json文件名必须是stats.json将 stats.json导入 可视化工具 并分析两种可视化工具供选择。第一原创 2020-05-28 18:32:32 · 1560 阅读 · 0 评论 -
小试牛刀之webpack-dev-server
用express搭建过一个小型的服务器,用过监听模式来解决手动npm run build的麻烦,这次使用webpack-dev-server来搭建一个服务器,且一并解决“手动编译、手动刷新浏览器”的麻烦。小试牛刀代码目录详细代码index.html<html><body> <div id="root"></div></body></html>index.jsimport {add,sub,mul,原创 2020-05-28 17:14:01 · 396 阅读 · 0 评论 -
webpack的watch
开发过程汇总,原创 2020-05-27 17:25:12 · 1499 阅读 · 0 评论 -
webpack的source map
source map将编译后的代码映射到原始源代码devtool是否生成source map,怎么生成source map,devtool说了算。不同的值会明显影响到构建(build)和重构建(rebuild)速度。参考文章使用source mapdevtooldevtool demo...原创 2020-05-27 14:26:07 · 843 阅读 · 0 评论 -
webpack编译打包过程浅析
node_modules/webpack/bin/webpack.jsconst path = require("path");//"d:\workspace\webpack\demo\node_modules\webpack-cli\package.json"const pkgPath = require.resolve("webpack-cli/package.json");con...原创 2020-04-25 19:23:58 · 1355 阅读 · 0 评论 -
webpack之module.rules
AMD是require.js在推广过程中对模块定义的规范化产出;CMD是sea.js在推广过程中对模块定义的规范化产出。它们都是为了实现js在浏览器端的模块化开发,且异步加载。其中,require.js中有全局require和局部require,而sea.js中只有局部require。本文主要是为了记录下二者的使用,便于日后回忆使用原创 2020-04-22 16:12:47 · 9484 阅读 · 0 评论 -
【webpack】noParse
为了提高构建性能,在配置webpack.config.js时,会用到noParse,比如,将noParse字段值配置成一个正则表达式。//包含"jquery"或者"chartjs"的文件路径,不解析module.exports = { module:{ noParse:/jquery|chartjs/, rules:[] }}...原创 2020-04-22 11:41:05 · 1585 阅读 · 0 评论