Webpack4学习(五)配置详解

### entry: - string:"./src/index.js" 单入口,打包生成也是单文件 - array:"./src/index.js",'./src/test.js' 多入口,打包生成是单文件 只有在HMR功能中让html热更新生效才用 - object:{main:"./src/index.js",test:"./src/test.js"} {jquery:["jQuery"]} 多入口,打包生成是多文件 文件名是key ### output // 输出文件名称 filename: // 输出文件路径 path: //所有资源引入公共路径前缀,可以配置CDN哦 publicPath:"/" // 非入口chunk的名称 chu ......

Webpack4 学习(四)性能优化

### webpack性能优化 - 开发环境优化 - 生产环境优化 ### 开发环境优化 - 优化打包构建速度 - 优化代码调试 ### 生产环境优化 - 优化打包构建速度 - 优化代码运行的性能 ### HMR(比较鸡肋) hot module replacement 热模块替换 一个模块发生变化,只编译这个模块,其他模块不动 - 样式文件:可以使用,因为style-loader内部实现了 - JS文件:默认没有不能使用解决办法: ``` 在JS文件中编写 if(module.hot) { module.hot.accept('./print.js',function(){ print(); }) } ``` 只能修改非入 ......

Webpack4学习(三)进阶操作 JS+Html

### JS 语法检查 eslint 轻易不要打开,孩子要听劝 eslint 需要eslint-loader 依赖eslint 默认是全部文件检查 npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import ##### webpack.config.js ``` rules:[ { /* ** 应该只检查自己的源代码 ** 设置检查规则: ** package.json中eslintConfig中设置~ ** aribnb-->eslint-config-airbnb-base、 eslint、e ......

Webpack4 学习(二)进阶操作 CSS

### 将css提取成单独文件 下载插件 mini-css-extract-plugin ``` const miniCssExtractPlugin = require('mini-css-extract-plugin'); module:{ rules:[ { test:/\.(css)$/i, use:[ # 提取JS中的css成单独文件 miniCssExtractPlugin.loader, "css-loader" ] } ] }, plugins:[ new miniCssExtractPlugin( { # 不配置默认在根目录下生成main.css文件 file ......

Webpack4学习(一)基础入门操作

[官方文档](https://webpack.docschina.org/concepts/ "官方文档") 文章按照webpeck4. 的版本记录,但是本人用的时webpack5,所以会记录一些中间遇到的问题 ### 五个基本组成部分 ##### 入口 Entry ``` entry:"./src/index.js" 入口文件位置 ``` ##### 输出 Output ``` import {resolve} from "path" output:{ filename:"index.js", # 输出文件名称 path:resolve(__dirname,'dist') #输出文件位置 } ``` ##### 加载项 Loader ``` modul ......