![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
daodaoke
这个作者很懒,什么都没留下…
展开
-
SharedConfig 配置说明
declareinterfaceSharedConfig{/** 直接在异步请求后面包含提供的和回退模块。这也允许在初始加载时使用这个共享模块。所有可能的共享模块也需要渴望。*/eager?:boolean;/*** 提供的模块应该被提供以共享范围。如果在共享范围中找不到共享模块或版本无效,则还充当回退模块。默认为属性名称。*/import?:string|false;/*** 从描述文件中确定所需版本的包名。仅当无法从请求中自动确定包...原创 2021-07-09 14:01:39 · 1907 阅读 · 0 评论 -
webpack优化环境配置 -- 进阶篇知识要点汇总
1、HMRcss样式只需要在devServer 里面 hot 配置为true即可js文件需要在js文件里面加配置才可以实现,要不然是整个页面刷新注意: 只适用于非入口文件js if (module.hot) { // 一旦 module.hot 为true,说明开启了HMR功能。 --> 让HMR功能代码生效 module.hot.accept('./print.js', function() { // 方法会监听 print.js 文件的变化,一旦发生变化,其他模块不会原创 2020-07-31 22:49:15 · 315 阅读 · 0 评论 -
webpack配置详解【六】 -- optimization详解
minimizer内配置的压缩 需要安装terser-webpack-pluginnpm i -D terser-webpack-plugin1、文中注释内容是默认,可不写,除非需要修改里面的配置。2、runtimeChunk可解决修改a文件导致b文件的contenthash变化的问题。其他更多参数详解见代码注释。const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'原创 2020-07-28 18:08:23 · 1438 阅读 · 0 评论 -
webpack配置详解【五】 -- devServer详解
参数都很简单,详见下面代码块。需注意一点就是:开启HMR功能后会和contenthash冲突,报错。另外proxy很实用,代码里列举了基本配置,更多使用方法参加官方文档。const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { filenam原创 2020-07-28 16:34:46 · 720 阅读 · 0 评论 -
webpack配置详解【四】 -- resolve详解
resolve: 解析模块的规则resolve.aliasresolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置:resolve: { alias: { $css: resolve(__dirname, 'src/css') } }这样在js文件里面引用的时候可以简写文件路径import '$css/index.css'extensions配置省略文件路径的后缀名 resolve: { // 配置省略文件路原创 2020-07-28 15:34:38 · 2721 阅读 · 0 评论 -
webpack配置详解【三】 -- module详解
知识点:1、loader加载顺序是 从右到左,从下到上2、多个loader用useuse: [‘style-loader’, ‘css-loader’]3、exclude和include的搭配使用可以缩小匹配的范围4、如果觉得loader自带顺序导致格式混乱的话,或者觉得不方便可以指定 enforce的值来指定loader的顺序参数说明pre优先处理normal正常处理(默认)inline其次处理post最后处理5、使用oneOf提升效率,原创 2020-07-28 14:37:54 · 605 阅读 · 0 评论 -
webpack配置详解【二】 -- output详解
const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { // 文件名称(指定名称+目录) filename: 'js/[name].js', // 输出文件目录(将来所有资源输出的公共目录) path: resolve(__di原创 2020-07-28 14:14:26 · 505 阅读 · 0 评论 -
webpack配置详解【一】 -- entry详解
entry: 入口起点1. string --> ‘./src/index.js’ 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main2. array --> [’./src/index.js’, ‘./src/add.js’] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 --> 只有在HMR功能中让html热更新生效~3、 object 多入口 有几个原创 2020-07-28 11:11:31 · 917 阅读 · 0 评论 -
webpack常见Loader包、Plugin包,以及相关配置的注意事项
首先初始化package.json输入指令:npm init一路按回测即可,后续可在package.json里面修改输入指令:npm install webpack webpack-cli -g 全局安装npm install webpack webpack-cli -D 局部安装 <— 推荐原创 2020-07-17 15:35:22 · 221 阅读 · 0 评论 -
webpack环境的入门和环境搭建
安装webpack到本项目/** 安装最新的稳定版 **/# npm i -D webpack/** 安装指定版本 **/# npm i -D webpack@<version>/** 安装最新的体验版本 **/# npm i -D webpack@beta推荐上述命令(安装到本项目),当然也可以安装到全局( npm i -g webpack ),多个项目公用一个Webpack。使用Loader引入非js文件需要安装Loader# npm i -D style-loa原创 2020-07-15 21:30:06 · 101 阅读 · 0 评论 -
webpack4之 ReferenceError: document is not defined
错误信息如下:目录结构Webpack版本号HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>.转载 2020-07-15 21:28:31 · 8046 阅读 · 0 评论