1、webpack介绍
webpack是一种前端资源构建工具，一个静态模块打包器.
官网https://webpack.js.org
友好的模块化支持
代码压缩混淆
处理js/css兼容问题
性能优化
1.2、webpack的五个核心
entry入口 :字符串，数组，对象
output输出 :对象
mode 模式 :字符串
loader 加载器 :对象，里面写数组
plugin :数组
1.3安装
npm i -g webpack@4 webpack-cli@3 //全局安装，不要用!!!
//===========================
npm init -y
npm i -D webpack@4 webpack-cli@3
webpack 打包使用的核心代码
webpack-cli 打包使用时的命令
//安装好后可以通过先前提及过的npx命令来检查webpack的版本以确定是否安装成功：
npx webpack --version
1.4、基本使用
const path = require('path')
module.exports = {
// 打包模式 development | production
mode: 'development',
// 项目入口
entry: './src/index.js',
// entry:{'main': './src/main.js'} // 多入口
// entry:['./src/index.js', './src/main.js'] // 合并
// 项目出口
output: {
// 路径一定要用绝对路径
path: path.resolve('dist'),
// [name]默认的名称为main
// [hash]随机生成21位字符串
filename: 'js/[name].js'
}
}
1.5、配置文件
//安装
npm i -D html-webpack-plugin@4
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
//使用 webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('public/index.html'),
})
]
// 删除打包的dist目录
npm i -D clean-webpack-plugin
1.6、devServer的web服务
// 安装 webpack-dev-server
npm i -D webpack-dev-server@3
// 配置 node环境 web环境
devServer: {
// 运行代码目录
contentBase: path.resolve('dist'),
// 打包进度
progress: true,
// 端口号
port: 8080,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 除了一些基本的启动信息以外，其他的内容都不要显示
quiet: true,
// 服务器代理 --> 解决开发环境跨域问题
proxy: {
// 一旦devServer服务器接受到 /api开头的请求，就会把请求转发到另一个服务器
'/api': {
target: 'http://localhost:3000',
// 发送请求时，请求路径重写: 将/api 去除
pathRewrite: {
'^/api': ''
}
}
}
}
// package.json中的scripts中配置命令
"serve": "webpack-dev-server"
1.7、加载器
webpack只能打包处理以.js为后缀的模块，其他非.js后缀的模块webpack默认处理不了，而需要调用loader加载器才能正常打包
sass-loader可以打包处理.scss相关的文件
css-loader可以处理css样关的文件
babel可以处理js兼容模块
1.7.1、css打包
npm i -D style-loader css-loader
module: {
rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }],
}
在写加载器use的时候，需要注意：
- use数组中指定的加载器顺序是固定的
- 多个加载器调用的顺序是：从右向左、从下往上调用（倒序执行）
在配置好对应的css加载器后，webpack才能打包对应的css文件
1.7.2、scss打包
// 安装css预处理loader
npm i -D sass-loader@10 node-sass@5 style-loader css-loader
// loader配置
module: {
rules: [
// scss处理
{
test: /\.scss$/,
// 执行顺序 从右到边，从下到上
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
}
1.7.3、图片处理
// 安装
npm i -D url-loader file-loader html-loader@1
// loader配置
module: {
rules: [
// 图片处理
{
test: /\.(png|jpeg|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 图片小于8kb，就会被base64处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点：图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 打包后的路径和文件名称 [ext]扩展名
name: 'img/[name].[ext]',
// 打包后的文件指定访问路径前缀
publicPath: '/'
}
}
]
},
{
test: /\.html$/,
// 处理html中的img(负责引入img,从而能被url-loader进行处理)
loader: ['html-loader']
}
]
}
1.8 配置静态资源
// 安装
npm i -D copy-webpack-plugin@6
//引入
const CopyPlugin = require('copy-webpack-plugin')
// plugins配置
plugins: [
new CopyPlugin({
patterns: [
{
// 来源
from: path.resolve('./src/iconfont/'),
// 目标
to: path.resolve('./dist/iconfont')
}
]
})
]
1.9、js兼容问题
//按需加载进行兼容性处理
npm i -D babel-loader @babel/core @babel/preset-env core-js
//loader配置
module: {
rules: [
// js兼容处理
{
test: /\.js$/,
// 排除
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: 3,
// 兼容性做到哪个版本的浏览器
targets: {
chrome: '50',
firefox: '50',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
}
]
}
// ts处理
npm i -D typescript ts-loader@6
{ test: /\.ts$/, loader: "ts-loader" }
1.10、art-template
npm i -D art-template art-template-loader
module.exports = {
module: {
rules: [
{
test: /\.art$/,
loader: "art-template-loader"
}
]
}
}
// 注：对于babel处理js，它有兼容问题，可以选择对于js更高版本处理，或者可以处理
1.11、externals忽略文件不打包
jquery可以使用线上的cdn
import $ from 'jquery'
webpack.config.js
externals: {
jquery: 'jQuery'
}
1.12、忽略导入文件的后缀和路径别名
// 解析模块的规则
resolve: {
// 配置解析模块路径别名：优点简写路径，缺点路径没有提示
alias: {
// 定义一个@变量，可在import引入时使用
'@': path.resolve(__dirname, './src')
},
// 配置省略文件路径的后缀名称 import '@/index'
// 如果省略，建议文件名称不要重名了
extensions: ['.js','.json','.art','.vue']
}
总配置文件 webpack.config.js
// webpack默认配置文件，当然也可以更改名称
// webpack --config 配置文件
// 模块化规范 commonjs
const path = require('path')
// webpack插件，帮助webpack打包生成时，创建一个index.html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 删除打包成的dist目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 静态资源复制
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
// 开启的模式，生产还是开发
mode: 'development',
// 开发工具配置 开发时配置 source-map 作用：代码出错了，可以帮我们定位到src目录中程序
devtool: 'source-map',
// 指定入口文件
// 字符串
entry: './src/app.js',
// 对象 多入口 不多
/* entry: {
// key对应打包生成后的文件名称，可路径 value入口文件
app: './src/app.js'
}, */
// 数组
// 多文件合并 一般也不怎么用
// entry: ['./src/app.js']
// 出口
output: {
// 打包生成的文件路径 绝对地址
path: path.resolve('dist'),
// 打包生成后的主入口js文件
// 变量
// [name]-> 如果你的entry为对象方式，则name为key值，其它情况都为main
// [hash]-> 根据文件信息生成一个21位hash值，一般不重复,支持截取[hash:8]
// filename: '[name].[hash].js'
filename: '[name].[hash:8].js'
// filename: '[name].js'
},
// 打包是对于哪一些包，不进行打包
externals: {
// jquery: 'jQuery'
// import中的导入的包名称，window对象中的名称
jquery: '$'
},
resolve: {
// 配置解析模块路径别名：优点简写路径，缺点路径没有提示
alias: {
// 定义一个@变量，可在import引入时使用
'@': path.resolve('src'),
'_c':path.resolve('src/components')
},
// 配置省略文件路径的后缀名称 import '@/index'
// 如果省略，建议文件名称不要重名了
extensions: ['.js', '.json', '.art', '.vue']
},
// 加载器
module: {
// 规则
rules: [
// 处理css
{
// 正则匹配loader解析文件扩展名
test: /\.css$/i,
// loader执行顺序
// 执行顺序 写在一行：从右向左，写在多行：从下向上执行
use: [
"style-loader",
"css-loader"
]
},
// 处理scss
{
test: /\.scss$/,
// 执行顺序 从右到边，从下到上
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
// 图片处理
{
test: /\.(png|jpeg|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 图片小于8kb，就会被base64处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点：图片体积会更大(文件请求速度更慢)
limit: 1 * 1024,
// 打包后的路径和文件名称 [ext]扩展名
name: 'images/[name].[ext]',
// 打包后的文件指定访问路径前缀
publicPath: '/'
}
}
]
},
// html中图片处理
{
test: /\.html$/,
// 处理html中的img(负责引入img,从而能被url-loader进行处理)
loader: ['html-loader']
},
// js兼容处理
{
test: /\.ajs$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: 3,
// 兼容性做到哪个版本的浏览器
targets: {
ie: '8'
}
}
]
]
}
}
]
},
{ test: /\.ts$/, loader: "ts-loader" },
// 模板引擎解释
{
test: /\.vue$/,
use: ["art-template-loader"]
}
]
},
// 插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// 模板
template: path.resolve('public/index.html')
}),
// 复制静态资源 -- 直接复制不做任何处理
new CopyPlugin({
patterns: [
{
// 来源
from: path.resolve('public/favicon.ico'),
// 目标
to: path.resolve('dist/favicon.ico')
},
{
from: path.resolve('src/assets/iconfont'),
to: path.resolve('dist/iconfont'),
}
]
})
],
// 开发环境服务配置 打包时，放在内存中， 不会在磁盘中生成一个dist目录
devServer: {
port: 3000,
// 自动打开浏览器
// open: true,
// 显示编辑打包进度
progress: true,
// 安静模式,不显打包信息
quiet: true,
// 代理
/* proxy: {
'/api': {
target: 'https://www.baidu.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
} */
}
}
扫一扫
1482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
