个人webpack配置尝试

初始化

npm init -y
npm install webpack webpack-cli -D
配置入口和出口
npm install webpack-dev-server -D

自动载入js文件

npm install html-webpack-plugin -D
使用hash解决缓存问题

清除dist目录

npm install clean-webpack-plugin -D

css读取loader

npm install style-loader css-loader less less-loader -D
加载图片loader 解析图片打包成文件或者base64插入代码中
npm install file-loader url-loader -D

通过option进行配置处理

处理高版本js

@babel/core babel的核心模块
babel-loader 解析js代码的加载器，webpack和babel的桥梁
@babel/preset-env es6转化成es5插件的集合

npm install @babel/plugin-transform-runtime @babel/runtime -D
@babel/plugin-transform-runtime依赖于@babel/runtime，运行时自动寻找到runtime

关于跨域问题

当协议域名端口号不相同时会产生跨域
造数据方法:before

暴露全局变量

• 直接使用cdn的方式 https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
• providePlugin
• 暴露在全局下 expose-loader

import $ from 'jquery’这样引入的时候是从node_modules中去找

webpack.ProvidePlugin =>webpack自带的插件

sourceMap(代码排查)，用于调试错误

devtool
生产环境：cheap-module-source-map
开发环境：cheap-module-eval-source-map

Tree-shaking&scopeHosting

适用于生产环境
tree-shaking – 唯一一个在package.json中进行配置的项目 “sideEffects”:false,
这种方式可能会让引入没有使用的都被去除
排除掉需要的引入 “sideEffects”:["**/*.css"]

热更新

减少请求，提高加载速度，进行数据更新
new webpack.HotModuleReplacementPlugin() webpack自带的热更新

懒加载（动态加载模块）

在vue中所有的路由都进行了预引入

打包文件分析工具（生产环境下使用）

• webpack-bundle-analyzer

splitChunks

分离第三方模块和库

resolve解析

• extensions 添加扩展名进行匹配 引入时可以不用写.js也能正常导入 默认寻找js和json文件
• alias 设置别名

happyPack 多线程打包

• 多线程打包，把不同的逻辑交给不同的线程处理

根据mode分离配置环境