Webpack基础使用
一、Webpack是什么?
Webpack 是一种前端构建工具,前端静态资源打包工具。
1.构建工具,浏览器需要各种小工具将js、css等一些不能识别的语法处理成能识别的代码。
构建工具就是这些小工具的集合
2.打包工具,webpack 是以入口文件开始递归便利所有依赖,生成一个静态依赖图 - chunk文件。
再通过不同的loader对 文件进行编译处理,最终生成一个bundle文件输出。
二、Webpack 五个核心概念
1.Entry
入口(Entry)指示 Webpack 以那个文件为入口起点开始打包,分析构建内部依赖图。
2.Output
输出(Output)指示Webpack 打包后的资源bundles 输出到那里去,以及如何命名。
3.Loader
Loader 让 Webpack 能够去处理那些非JavaScript 文件(webpack 自身只理解JavaScript)
4.Plugins
插件(Plugins)可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
5.Mode
模式(Mode)指示webpack 使用相应模式的配置。 development 开发模式 production 生产模式
代码:
module.exports = {
entry: './src/index.js',
output: {
filename: 'static/js/[name].[hash:5].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
ident: 'postcss',
options: {
postcssOptions: {
plugins: [
require('postcss-preset-env')(),
]
}
}
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'static/css/main[hash:4].css'
}),
],
mode: isDev ? 'development' : 'production',
}
loader的配置:
css-loader:
mpm install css-loader style-loader -D
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
less-loader:
mpm install less-loader -D
rules:[
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
}
]
图片资源:
npm install url-loader -D
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
type: 'javascript/auto',
options: {
limit: 8 * 1024,
esModule: false,
name: '[name].[hash:4].[ext]',
outputPath: 'static/images'
}
},
html:
npm install html-loader -D
{
test: /\.html$/,
loader: 'html-loader'
},
处理其他资源:
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
type: 'asset/resource',
generator: {
filename: 'static/fonts/[name][ext]'
}
},
兼容性,配置babel
npm install babel-loader @babel/core @babel/preset-env -D
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
include: resolve(__dirname, 'src'),
options: {
presets: [
["@babel/preset-env",
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}]
],
cacheDirectory: true
}
}
plugins 插件的配置
处理HTML 的插件:
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
}
}),
]
mode 模式
mode: 'development',
devServer 开发服务器
devServer: {
static: resolve(__dirname, 'public'),
compress: true,
port: 3003,
open: true,
hot: true,
proxy: {
'/api/': {
target: 'http://localhost:3003',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
部分属性介绍
/*
babel-loader js 文件兼容性 和缓存处理
js 兼容性处理: babel-loader @babel/core @babel/preset-env
1. 基本js兼容处理 --> @babel/preset-env
问题:只能转换基本语法,如promise 不能转换
2. 全部js兼容性处理 --> @babel/polyfill
问题: 我只要解决部分兼容性问题,但是将所有兼容性代码全部引入, 体积太大
3. 需要做兼容性处理就做: 按需加载 --> core.js
babel缓存 cacheDirectory: true 开启缓存
文件资源缓存 当修改文件时需要及时更新 可以将文件资源命名加入 hash , 可选择不同的 hash
1. hash: 每次webpack 构建都会生成唯一值。每次打包所有文件都不走缓存
2. chunkhash: 根据chunk 来生产的hash 如果打包来源于同一个 chunk 则都会加载。
3. contenthash: 根据文件的内容生成hash 值,不同文件的hash 值不一样。
*/
/*
HMR 热模块替换
作用: 一个模块发生变化,只重新打包这一个模块(而不是打包所有模块)
极大提升构建速度
样式文件: 可以使用HMR 功能 因为style-loader 内部实现了~
js文件: 默认不能使用HMR 功能 (要手写。没必要,自能在入口js 手动监听限制加载引入模块。)
HTML文件: 默认不能使用HMR, 导致问题,html 文件不能热更新了。(不需要HMR) 解决: 在入口 entry 引入html
*/
/*
source-map: 一种 提供源代码到构建后代码映射技术 (如果构建后代码出错了,通过映射关系可以追踪代码错误)
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
inline-source-map: 内联
hidden-source-map: 外联
eval-source-map: 内联,在每一个模块后生成 source-map
nosources-source-map: 外部
cheap-source-map: 外部
source-map: 外部
*/