webpack学习
kirito0615
一位工作时间马上两年的前端萌新.
展开
-
5.webpack4抽离模块,懒加载,热更新简单使用
萌新自己学习webpack做的简单配置,如有错误请多包含,也可指点,谢谢. # 抽离公共代码 # 懒加载 # es6 jsonp实现动态加载文件 # 热更新 # 使用devServer的hot属性开启热更新 # 使用webpack自带的NamedModulesPlugin插件打印被更新的模块路径 # 使用webpack自带的HotModuleReplacementPlugin插件开启热更新监控 # 在入口文件中判断一下是否开启了热更新,并且指定需要检查的文件. # 如果开启了热更新,对应文件改动就不会刷原创 2020-09-15 11:02:14 · 177 阅读 · 0 评论 -
4.webpack4打包简单优化
萌新自己学习webpack做的简单配置,如有错误请多包含,也可指点,谢谢. # noParse 内置 # 设置不去解析的包以提高性能 # IgnorePlugin 内置 # 设置不去打包对应插件内的某些文件 # DllPlugin DllReferencePlugin 内置 # 使用额外的配置文件在dist中生成想要换存成dll文件的包 # 使用DllReferencePlugin读取dist中是否有对应的dll文件,如果有,则不再打包对应的包 # 需在html中引用dll包对应的js,不然无法找到原创 2020-09-15 10:47:29 · 211 阅读 · 0 评论 -
3.webpack4 环境配置,错误映射,监听,跨域解决,设置别名,常用小插件简单使用
萌新自己学习webpack做的简单配置,如有错误请多包含,也可指点,谢谢. 写在开头 # source-map查错 # watch监听 # 小插件 # cleanWebpackPlugin # 每次生成代码之前,先将dist(打包文件目录)目录清空 # copyWebpackPlugin # 将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中 # bannerPlugin 内置插件 # 跨域 devServer使用三种方法解决跨域问题 # resolve # 配置需要解析原创 2020-09-15 10:39:06 · 297 阅读 · 0 评论 -
2.webpack4多入口打包简单演示
萌新自己入门webpack写的简单demo // An highlighted block const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', // 多入口 entry: { home: './src/index.js', other: './src/other.js' },原创 2020-09-15 10:02:02 · 115 阅读 · 0 评论 -
1.webpack4单入口基本配置
// webpack 是node语法 const path = require('path'); // index.html 打包相关 const HtmlWebpackPlugin = require('html-webpack-plugin') // 将多个css文件打包为一个css文件 const miniCssExtractPlugin = require('mini-css-extract-plugin') // 一个css最小化器 设置optimization.minimizer会覆盖webpa原创 2020-09-15 09:56:42 · 116 阅读 · 0 评论