webpabck 导读
使用 webpack 进行工程化开发
一、初始化包和安装 webpace
- 在当前项目里初始化一个包的描述文件
yarn init -y
- 安装
webpack工具
yarn install webpack@4 webpack-cli@3 --save--dev
二、核心项基础配置
新建 webpack.config.js 配置文件，并配置基础的选项
// 配置文件
// 注意：只能使用commonjs模块化的规范语法
const path = require('path')
module.exports = {
// 入口
entry: "./src/main.js",
// 出口
output: {
// 打包后的文件名
filename: 'js/app.js',
// 打包文件的输出路径
path: path.resolve(__dirname, "dist")
},
// loader（加载器、css、sass、等等）
// plugins（插件配置）
// 模式: 开发模式（development）,生产模式（production）
mode: "development"
}
安装加载器 css-loader和style-loader
yarn add style-loader@1.1.3 css-loader@3.4.2 -D
- 配置加载器
参考地址：webpack-loader
module.exports = {
...
// loader（加载器、css、sass、等等）
module: {
// 配置具体的加载器
rules: [
// 每个对象，处理一种文件
{
// 指定文件的格式，正则格式
test: /\.css$/i,
// 注意：加载顺序从右到左
use: ["style-loader", "css-loader"]
}
]
},
}
安装 HtmlWebpackPlugin插件来创建html文件
参考地址：HtmlWebpackPlugin
yarn add html-webpack-plugin@3.2.0 -D
- 配置插件并指定
html模版 - 在根目录下创建
public/index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpace dome</title>
</head>
<body>
<div id="app">
<h1>Hello Webpack</h1>
</div>
</body>
</html>
- 配置插件
// 生成html文件的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
})
]
}
配置图片
- 安装
url-loader、file-loader、html-loader
url-loader 可以限制超过指定大小的图片参与打包，否则直接转为base64编码 html-loader 解决在html模版中使用img标签是src引用路径，打包后的路径错误问题
-
参考地址：loaders
-
参考地址：file-loader
-
参考地址：url-loader
-
参考地址：html-loader
yarn add file-loader@5.0.2 url-loader@3.0.0 html-loader@0.5.5 -D
- 情况1: 限制超过指定大小的图片参与打包，否则直接转为base64编码，此时需要用到
url-loader - 配置
url-loader
module.exports = {
...
module: {
rules: [
...
// 处理 图片文件
{
test: /\.(png|jpg|gif)$/i,
use: [
{
// 指定具体的loader
loader: "url-loader",
// 配置选项
options: {
// 指定打包后的文件名称;
// img/:表示打包后的文件夹名称 [name]:表示采用文件原来的名称，[ext]:表示原来的扩展名 [hash:8]: 表示返回8位哈希值
name: "img/[name].[hash:8].[ext]",
// 配置超过指定大小的图片参与打包，否则直接转为base64编码
limit: 1024 * 4, // 超过4kb大小的图片参与打包
// url-loader 默认采用es6模块化，html-loader 采用commonjs模块化，
// 为了让html模版中直接引入的图片可以正常显示，这里要关闭es6模块化
esModule: false,
},
},
],
},
]
}
}
- 情况2: 在html模版中引用的图片资源或在css中设置 background: url('引用的图片资源')，此时需要用到
html-loader
module.exports = {
...
module: {
rules: [
...
// 处理 html 文件中的图片资源
{
test: /\.html$/i,
use: ["html-loader"],
},
]
}
}
分割Js中的Css
- 安装
mini-css-extract-plugin插件
yarn add mini-css-extract-plugin@0.9.0 -D
- 配置插件
// 引入独立生成css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
...
// plugins（插件配置）
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
...
],
}
- 使用插件的
loader
module.exports = {
module: {
// 配置具体的加载器, 每个对象，处理一种文件
rules: [
// 处理 css 文件
{
// 指定文件的格式，正则格式
test: /\.css$/i,
// MiniCssExtractPlugin.loader 替换 style-loader
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 设置css文件中获取资源的路径
publicPath: '../'
}
},
"css-loader"
],
},
],
},
...
}
使用开发服务器实现开发中的查看运行结果
- 安装插件
yarn add webpack-dev-server@3.10.3 —D
- 配置插件
module.exports = {
...
// 配置 webpack-dev-server
devServer: {
port: 8848,
},
}
- 在
package.json中配置脚本命令
{
...
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack"
},
}
- 执行命令
yarn dev
