webpack
文章平均质量分 63
chen__cheng
1.1的n次方
展开
-
生产环境webpack.config.js性能优化配置
生产环境webpack.config.js性能优化配置1.优化打包构建速度1.修改loader处理2.babel缓存3.多进程打包4.externals5.dll2.优化代码运行的性能1.文件资源缓存2.tree shaking3.code split4.懒加载和预加载5.PWA1.优化打包构建速度1.修改loader处理当处理一个文件的时候,会去匹配所有的loader,但是往往一个文件只需要一个loader处理,其他剩余的loader没必要花时间去匹配处理,此时就可以使用oneOf选项使用:需要处原创 2021-04-05 13:56:34 · 574 阅读 · 0 评论 -
解决eslint报错“Parsing error: ‘import‘ and ‘export‘ may only appear at the top level”
报错详情:“Parsing error: ‘import’ and ‘export’ may only appear at the top level”报错代码document.querySelector('#btn').onclick = function () { import(/* webpackChunkName: 'test' */'./print') .then(({ print }) => { console.log(print(2, 3));原创 2021-03-31 09:59:34 · 15177 阅读 · 5 评论 -
开发环境webpack.config.js性能优化配置
webpack开发环境性能优化1.优化打包构建速度2.优化代码调试1.优化打包构建速度现象:每次修改一个模块中的内容的时候,都会将其他模块一同再次打包处理。如果一个项目中的模块很多时,每次修改都去打包所有的模块,这必然会影响打包构建速度。解决:HMR:hot module replacement热模块替换/模块热替换作用:一个模块发生变化,只会重新打包这一个模块,而不是打包所有模块,极大提升构建速度开启HMR:devServer: { contentBase: resolve(__di原创 2021-03-29 10:14:50 · 166 阅读 · 0 评论 -
生产环境webapck.config.js配置详解
生产环境webapck.config.js配置详解1.处理css文件1.提取出css为单独文件2.css兼容性处理3.压缩css4.完整css处理代码2.js处理1.js语法检查eslint2.js兼容性处理3.js压缩处理3.html处理生产环境不同于开发环境在于,生产环境需要优化代码,保证在上线之后运行更快且兼容各大浏览器。以开发环境中css资源打包为例:先把css资源构建一个commmjs模块,形成一个字符串,接着在js文件中创建style标签将构建的字符串插入到style标签中,而如果样式资源很多原创 2021-03-28 12:14:59 · 532 阅读 · 0 评论 -
webpack配置devServer
由于每次打包之后修改源文件都需要再次打包,无疑这种对于开发者来说是有点不方便的,所以webpack可以通过配置devServer(开发服务器)来进行自动化操作(自动编译,自动打开浏览器,自动刷新浏览器)特点:只会在内存中编译打包,不会有任何输出,也即不会显示输出构建之后的目录,而运行结束自动清除内存使用:下载webpack-dev-servernpm i -s webpack-dev-server启动:npx webpack-dev-server不同于webpack全局安装可以直原创 2021-03-27 14:43:52 · 454 阅读 · 0 评论 -
Error: Cannot find module ‘webpack‘
出现场景:配置完成webpack-dev-server之后,开始兴高采烈使用npx web-dev-server运行的时候,出现了以下的错误:E:\前端\nodejs\实践\js\webpack_01>npx webpack-dev-serverinternal/modules/cjs/loader.js:883 throw err; ^Error: Cannot find module 'webpack'Require stack:- E:\前端\nodejs\实践\js\no原创 2021-03-27 14:33:57 · 3144 阅读 · 0 评论 -
开发环境webapck.config.js配置详解
1.打包样式资源webpack只能处理js/json资源,因此对于样式资源的打包需要通过loader,而loader需要在webpack.config.js(webpack配置文件)中进行定义其中webpack.config.js配置文件用于指示webpack需要做哪些操作,当运行webpack指令的时候,会加载里面的配置项,且此配置文件语法采用commonjs,原因是:所有构建工具都是基于nodejs平台运行的,而基于nodejs模块化默认采用commonjs,而这个不同于项目中js源文件.js采用的原创 2021-03-25 09:27:21 · 484 阅读 · 0 评论 -
ERROR in ./src/webpack_01.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/
在webpack进行打包的时候,出现以下错误:ERROR in ./src/webpack_01.less (…/node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./src/webpack_01.less)Module build failed (from …/node_modules/less-loader/dist/cjs.js):Error: Cannot find module ‘less原创 2021-03-25 09:23:09 · 2062 阅读 · 0 评论 -
webpack基本使用-打包js/json
项目目录:build #打包之后的文件存储 index.js index.htmlsrc # 源文件 index.js index.html假设设定:/src/index.js为webpack入口起点文件运行命令开发环境webpack ./src/index.js -o ./build --mode=developmentwebpack会以 ./src/index.js作为入口文件开始打包,打包后输出到 ./build目录下,整体打包环境是开发环境结果:[w原创 2021-03-24 09:55:20 · 367 阅读 · 0 评论 -
什么是webpack
webpack是一种前端资源构建工具先来看以下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpackStudy</title> <link rel="stylesheet" href="./webpack_01.less"></head><body> &..原创 2021-03-24 08:40:25 · 196 阅读 · 0 评论