webpack
- webpack是一种前端资源构建工具，一个静态模块打包器，在webpack看来，前端所有资源文件都会作模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源
- 使用 npm 安装 webpack 同时需要安装 webpack-cli
- npm install webpack webpack-cli -D
webpack五个核心概念
- Entry 入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
- Output 指示webpack打包后的资源bundles输出到哪里
- Loader 让webpack能够处理那些非js文件
- Plugins 插件功能，可以用于打包优化和压缩，重新定义环境变量等功能
- Model 指示webpack使用相应模式的配置
- development 能让代码本地调试运行的环境
- production 能让代码优化上线运行的环境
webpack打包css
- 分别用到3个包less-loader,css-loader,style-loader
- 还需要下载less
webpack打包html
webpack.config.js
- webpack的配置文件
- 所有构建工具都是基于node.js平台运行的，模块化操作默认采用commonjs
- webpack只能理解javascript和json文件，loader让webpack能够去处理其他类型的文件，并将他们转为有效的模块
//用来拼接路径
const {resolve} = require('path')
module.exports = {
//入口起点
entry: './src/index.js',
//输出
output: {
//输出文件名
filename: 'built.js',
//输出路径
path: resolve(__dirname,'build')
},
//loader的配置
module: {
rules: [
//详细loader配置
{
//打包css资源
test: /\.css$/,
use: [
'style-loader',
'css-loader',
//下载less-loader还得下载less
//将less转化成css
'less-loader'
],
}
]
},
// plugins的配置
pligins: [
],
//模式
mode: 'development',
//mode: 'production'
}
ESmodules 和 CommonJS
- ESmodules中可以导入Commonjs模块
- CommonJS中不能导入ESmodules模块
- CommonJS始终只会导出一个默认成员
- 注意import不是解构导出对象
图片打包
- 安装url-loader插件
- 小文件使用Data URLs,减少请求次数
- 大文件单独提取存放，提高加载速度
webpack处理es6转换
- 引入babel-loader，@babel/core，@babel/preset-env
webpack兼容多种模块化标准
- 遵循ESmodules标准的import声明
- 遵循CommonJS标准的require函数
- 遵循AMD标准的define函数和require函数
- 样式代码中的@import指令和Url函数
- HTML代码中图片标签的src属性
webpack 插件
- 自动清除输出目录插件clean-webpack-plugin
- 自动生成使用bundle.js的HTML插件html-webpack-plugin
- 拷贝文件到其他路径下clean-webpack-plugin
自动更新打包数据
- 运行webpack --watch 监控包变化
- 可以利用browser-sync监控浏览器变化 browser-sync dist --files "**/*"
webpack Dev Server
source Map
- 解决调错
- eval-是否使用eval执行代码
- cheao-Source Map 是否包含行信息
- module-是否能够得到Loader处理之前的源代码
- 在开发环境下选择cheap-module-eval-source-map
- 生产模式下选择none或者nosources-source-map
webpack HMR
- 应用运行过程中实时替换某个模块，应用状态不受改变
- HMR是webpack中最强大的功能之一
- 极大程度提高开发者效率
开启HMR
- 安装webpack-dev-server模块
- 运行webpack-dev-server --hot
const HtmlWebpackPlugin = require('html-webpack-plugin')
//引入模块
const webpack = require('webpack')
module.exports = {
mode: 'none',
entry: './src/main.js',
output: {
filename: 'js/bundle.js'
},
devtool: 'source-map',
// 打开热更新
devServer: {
hot: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Tutorial',
template: './src/index.html'
}),
//配置HMR
new webpack.HotModuleReplacementPlugin()
]
}
HMR APIs
- 处理js热替换的方法
- 处理图片热替换的方法
// HMR 手动处理模块热更新
// 不用担心这些代码在生产环境冗余的问题，因为通过 webpack 打包后，
// 这些代码全部会被移除，这些只是开发阶段用到
if (module.hot) {
let hotEditor = editor
module.hot.accept('./editor.js', () => {
// 当 editor.js 更新，自动执行此函数
// 临时记录编辑器内容
const value = hotEditor.innerHTML
// 移除更新前的元素
document.body.removeChild(hotEditor)
// 创建新的编辑器
// 此时 createEditor 已经是更新过后的函数了
hotEditor = createEditor()
// 还原编辑器内容
hotEditor.innerHTML = value
// 追加到页面
document.body.appendChild(hotEditor)
})
module.hot.accept('./better.png', () => {
// 当 better.png 更新后执行
// 重写设置 src 会触发图片元素重新加载，从而局部更新图片
img.src = background
})
// style-loader 内部自动处理更新样式，所以不需要手动处理样式模块
}
webpack DefinePlugin
tree-shaking
