![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
文章平均质量分 56
1oneLee
这个作者很懒,什么都没留下…
展开
-
Webpack的使用——进阶篇
Webpack从入门到精通-进阶篇 目录Webpack从入门到精通-进阶篇一、create-react-app react-project二、vue create vue-project三、自定义loader3.1预备知识3.2自定义babel-loader四、自定义plugin4.1 预备知识-compiler钩子4.1.2 tapable4.1.2 compiler钩子4.2 预备知识-compilation钩子4.2.1 小插曲:nodejs环境中调试4.2.2 compilation钩子4.3 自定原创 2021-02-25 15:05:56 · 247 阅读 · 2 评论 -
webpack的使用——基础篇
一、Webpack 简介 1.1 webpack 是什么 webpack 是一种 前端资源构建工具,一个静态模块打包器(module bundler)。 在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。 1.2 webpack 五个核心概念 1.2.1 Entry 入口(Entry):指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。 1.2.2原创 2021-02-23 13:32:10 · 395 阅读 · 3 评论 -
webpack 性能优化总结
webpack 性能优化 生产环境性能优化 开发环境性能优化 开发环境性能优化 优化打包构建速度 HMR (css/js/html) html 文件一般只有一个,不需要做 js 文件默认是不支持的,需要自己写 css 文件 经过 style-loader 处理,默认是做好的,所以我们也不需要操心 优化代码调试 (分为生产环境和开发环境两种) source-map 一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了, 通过映射可以追踪源代码错误) 生产环境优化 优化打包原创 2021-02-23 13:35:53 · 166 阅读 · 0 评论 -
webpack性能优化——source-map
webpack.config.js 文件来配置 webpack const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 引入 html 文件,解决 html 文件不能热更新的问题 entry: ['./src/js/index.js', './src/index.html'], output: { fi.原创 2021-02-22 13:39:40 · 224 阅读 · 0 评论 -
webpack性能优化——热模块替换(HMR)
/* 开发环境配置:能让代码运行 运行项目指令: webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包,没有输出 */ /** * HMR: hot module replacement (热模块替换) * 作用: 一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块) * 极大提升构建速度 * * 样式文件: 可以使用 HMR 功能(因为 style-loader原创 2021-02-22 13:37:13 · 201 阅读 · 0 评论 -
webpack生产环境配置(详细注释)
详细注释 const { resolve } = require('path') const MiniCssExtractorPlugin = require('mini-css-extract-plugin') const OptimiziCssAssetsWebpackPlugin = require('optimizi-css-assets-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') // 定.原创 2021-02-21 21:55:56 · 318 阅读 · 0 评论