html 打包依赖
-
loader中use得加载顺序是逆序得，所以我们需要注意loader得使用顺序
- 使用插件
html-webpack-plug
- 作用:创建html文档到输出路径，并将打包后所有资源加载其中
- 接收一个参数tamplate 复制template中指定得html文件内容至输出路径
- 用法：
// 导入依赖 在插件中调用即可
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
// 接收一个参数设置要复制得文件
new htmlWebpackPlugin({
template: './src/index.html'
}),
],
css/sass 打包依赖
-
loader: mini-css-extract-plugin style-loader css-loader sass-loader node-sass
-
css-loader:
- 作用：将引入入口文件得css资源加载到输出js中 css得样式会放在打包后得js中
-
style-loader:
- 作用：将输出文件中得css部分以style得形式加载至html中
-
sass-loader:
- 作用：编译sass文件为css文件/使用顺序在css-loader之后
- 依赖：node-sass 和sass-loader配套使用
-
mini-css-extract-plugin:
- 作用：整合css文件打包后生成一个css文件，并加载至html页面中
- 需要注意的是：和style-loader冲突二选一
- 用法：放置loader最前方，最后一个执行。
- 在loader中调用其自身loader方法
- 并在插件中同时调用
const miniCssExtractPlugin = require('mini-css-extract-plugin')
test: /\.css$/,
use: [{
loader: miniCssExtractPlugin.loader,
options: {
esModule: false
},
}, 'css-loader',
// 插件
plugins: [
// 接收一个参数设置输出路径 mini-css-extract-plugin 可以把css文件剥离入口文件，并在输出文件html页面中以link形式引入资源
new miniCssExtractPlugin({
filename: 'css/bulit.css'
}),
],
-
处理图片资源
-
url-loader 依赖file-loader 配套使用
- 作用：打包css文件中background:url('') 引入得路径，并可以压缩图片
- 用法：
- 处理图片资源 --url-loader 依赖file-loader
{
test: /\.(png|jpg|gif|jpeg|bmp|ttf|svg)$/,
// 单个loader处理时可以直接书写loader + 依赖字符串形式 不用在use数组中使用
// 使用 url-loader 依赖于 file-loader
loader: 'url-loader',
// 配置项
options: {
// 当图片大小小于8kb,就回被base64处理
// 有点：减少请求数量（减少服务器压力）
// 缺点：图片体积会增大
limit: 8 * 1024,
// 使url-loader和html-loader得引入方式匹配 默认url-loader使用ES6 而html-loader使用CommonJs
esModule: false,
// [ext] 取文件原来扩展名
// 打包图片时重命名名称 取hash后得前三位
name: '[hash:3].[ext]',
}
-
处理在html中引入得图片路径
-
html-withimg-loader
- 作用：打包在html中引用得图片路径 <img src="1.jpg"/>
-
打包其他静态资源
-
file-loader
- 作用：打包静态资源 如：字体 ttf/svg/woff/eot
-
清空打包目录，每次打包重新生成
clean-webpack-plugin- 在打包之前先清除之前得文件，在进行打包。
-
css文件压缩
- 插件：
optimize-css-asserts-webpack-plugin
- 作用：压缩css文件为生产状态 和sass中得compress 一致
- 用法：插件plugins中引入
-
css兼容性设置 autoprefixs
-
postcss-loader 插件：postcess-preset-env
- 作用：根据browerslist中配置得浏览器配置，自动添加css兼容前缀 autoprefixs
- browerslist 配置在package.json 作用匹配需要做兼容得浏览器范围
- browerslist 设置两个模式 development/production
- 注意：browerslist得模式和webpack得模式不同，默认为production模式，如需更改
需要在全局中修改 process.env.NODE_ENV = "development"
- 在loader中设置，process-loader 并在loader插件中引用postcss-preset-env
test: /\.css$/,
use: [{
loader: miniCssExtractPlugin.loader,
options: {
esModule: false
},
}, 'css-loader',
// 兼容配置
// postcss 在webpack中是已下两种依赖
// 依赖：postcss-loader postcss-preset-env
// postcss-preset-env 帮助postcss找到package.json中browserslist里面得配置，通过配置加载指定得css兼容样式
// browserslist 在package.json中配置 目的是设置css所需要兼容得哪类浏览器
// 功能：设置针对浏览器得兼容配置 模式：开发，生产
{
loader: 'postcss-loader',
options: {
// ident:识别
ident: 'postcss',
plugins: (loader) => [
require('postcss-preset-env')()
]
}
},
]
// package.json 具体匹配规自行百度
"browserslist": {
"devlopment": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
-
eslint校验
- eslint 校验js代码
- loader: eslint-loader eslint 配套使用
- 作用：培养代码规范，整洁。公司代码校验
- eslint 风格使用airbnb
- eslint-config-airbnb-base eslint-plugin-import ;eslint-config-aribnb 支持recat
- 使用
{
test: /\.js$/,
loader:'eslint-loader',
options:{
// 自动修复违规代码
fix:true
}
}
// 关联airbnb
// package.json
eslintConfig:{
// 继承airbnb
"estend":"airbnb-base"
}
-
js兼容
- babel-loader @babel/core @babel/preset-env @babel/polyfill core-js配套使用
- 使用时，在入口文件中引入
import '@babel/polyfill'- 作用：解决ie等浏览器不识别es6等js语言
- @babel/polyfill 优点：做完整得兼容处理 ，缺点：打包后js文件体积大
- core-js 按需兼容 ：优点：体积小，可以按照需求做兼容
- 使用：
{
test:/\.js$/,
exclude:/node_modules/,
loader:babel-loader,
options:{
//预设：
presets:[
[
'@babel/preset-env',
{
useBuiltIns: 'usage', //按需加载
corejs: { //关联corejs
version:3 //在安装时会提示版本
},
// 指定兼容哪些浏览器版本
targets: {
chrome:'60',
ie:'9',
firefox: '60',
safari: '10',
edge: '11',
}
}
]
]
}
}
-
HMR 模块热更新
- 某一个模块（文件）改变时，其他某块不会重新打包
- 在devServer中增加hot:true字段，开启热更新得模块热更新
- html文件处理
- html 当开启热更新后，html文件默认不支持模块热更新，同时还会造成html文件热更新失败。
- 解决得办法：在入口entry中引入html文件
entry: ['./src/js/index.js', './src/index.html'],
- css文件处理
- css文件通过style-loader可以完成模块热更新（适用于开发环境），当我们需要在生产环境中将所有css文
件整合时我们在使用mini-css-extract-plugin loader将我们得css合并成一个文件
- js文件处理
- js文件默认不支持模块热更新
- 解决办法
- 当开启热更新后我们在js入口文件中监听模块热更新，当某一个模块代码发生变化时做单独处理
// 在js入口文件中写入代码 入口文件自身不能设置模块热更新，因为入口文件会加载所有模块，
if (module.hot) {
module.hot.accept('./module1.js',() => {
// 参数1 要监听得模块路径 参数2 回调函数
// 我们在这里完成模块对得操作
// 当被检测当前文件代码有错误时，不会触发当前文件得模块热更新
})
module.hot.accept('./module2.js',() => {
// 我们在这里完成模块对得操作
})
}
-
webpack.optimize.CommonsChunkPlugin
// 在项目入口区分文件
entry: {
app: resolve(__dirname,'./src/index.js' ), // 项目入口文件
vendors: ['jquery'], // 要从入口文件中剥离出去得依赖
}
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:'vendors'， // 要剥离得依赖数组引用名称
filename: vendors, // 剥离后得文件名称
})
]
-
source-map
- 调试 排错
在webpack.config.js中加入 devtool: "source-map"
// source map 源代码后构建后代码得映射关系表，打包后得项目报错时，可以追踪到源代码
/*
* devtool模式
* const tip = '错误代码精准信息，源代码错误位置'
* source-map 外部 + tip
* inline-source-map 内联 在打包后得文件中生成映射信息，+ tip
* hidden-source-map 外部 只能提示到打包后代码得错误位置
* eval-source-map 内联 在打包后得文件中对引入得每一个文件得eval中生成source-map, tip
* nosource-source-map 外部, tip
* cheap-source-map 外部, tip . 只能精准到行
* cheap-module-source-map 外部, tip
* 内联 和 外部得区别：1. 外部生成了文件， 内联没有 2. 内联构建速度更快
* 开发环境：速度快，调试优
* 速度对比(eval>inline>cheap>....)
* eval-cheap-source-map 包含代码提示，打包速度块
* eval-source-map
* 生产环境：源代码是否隐藏？调试要不要友好
* 内联模式代码体积大，生产环境不用内联
* nosource-source-map 全部隐藏
* hidden-source-map 只隐藏源代码, 会提示构建后的错误
*/
-
oneOf
- 问题：每个不同文件在loader转换时，都会被命中。遍历module中rules中得所有loader
- loader内容直加载一次
- 缺点：多次处理同类型文件得loader不会全部触发，只会触发一个
- 优点：在oneOf中得loader只加载一次
-
缓存
- 缓存适用于生产环境
- 1.babel 缓存 在options中设置
cacheDirectory:true 开启缓存
- 2.文件资源缓存
- 借助Node服务器
- 在打包输出得时候给打包文件加上唯一标识
output:{filename:'index.[contenthash:10].js'}- 1.
hash: 利用webpack每次打包生成得hash记录 缺点：修改js或css代码时，会同时触发css/js更新
- 2.
chunkhash:根据构建打包得chunk创建hash 缺点：同上
- 3.
contenthash:根据文件内容生成hash值，不同文件得hash值不一样 。
当文件没有发生改变时hash值不变。解决了问题
-
tree shaking (树摇)
- 前提：使用ES6模块化，开启production环境
- 作用：去掉无用代码，减少代码体积
- 问题：由于版本得区别可能会干掉import 引入得css资源
- 解决：在package.json文件中增加
sideEffects:["*.css", "*.sass"] 排除匹配项
-
