![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
五仁卤鸡翅
这个作者很懒,什么都没留下…
展开
-
4、webpack生产环境优化配置
生产环境优化配置优化打包构建速度1、oneof2、bable缓存3、多进程打包4、externals防止将某些包,打包到最终的输出目录中5、dll使用dll技术,对某些库单独打包使用创建webpack.dll.jsconst webpack = require('webpack')module.exports ={ entry:{ // 最终打包生成的name为jquery,['jQuery']表示要打包的库是jQuery jquery: ['j原创 2020-12-23 21:24:20 · 222 阅读 · 0 评论 -
3、webpack生产环境基本配置
开发环境问题1、开发环境中的css是在js文件中,需要先下载js代码然后创建style标签,会出现闪屏现象,生产环境需要将css代码从js代码中提取出来2、js、css代码需要进行压缩3、css、js具有兼容性问题–> 1、让代码性能更好、运行更快。2、兼容浏览器生产环境webpack.config.js 配置1、mini-css-extract-plugin 提取js中的css,形成单独的文件npm install --save-dev mini-css-extract-plugin原创 2020-12-22 21:49:09 · 197 阅读 · 2 评论 -
2、webpack开发环境优化配置
开发环境优化配置1、优化打包构建速度HMR2、优化代码调试source-mapconst { resolve } =require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { // 可以将index.html文件配置在入口文件,使得html文件能够热更新,但一般不需要配置,html文件不需要热更新 // entry: ['./src/js/index.js原创 2020-12-22 21:35:30 · 119 阅读 · 0 评论 -
webpack开发环境基本配置
开发环境配置文件 webpack.config.js开发环境配置文件webpack.config.js1、下载css-loader、style-loader、less-loader、lessnpm i css-loader style-loader less-loader less -D2、打包html资源,下载html-webpack-pluginnpm install --save-dev html-webpack-plugin3、打包图片资源、下载图片html-loader、url-l原创 2020-12-22 21:24:58 · 143 阅读 · 0 评论