Webpack基础入门
优秀的打包工具，减少前端工作量，模块化编程，弥补browser的原生的不足，参考webpack中文网；
安装
- 基于node.js，安装：node中文官网;
npm init -y初始化文件夹，生成package.json配置文件；
npm install webpack --save-dev本地安装；
或npm install webpack --global全局安装；
生产环境安装包
--save，如jQuery.js等；
开发环境安装包--save-dev，如css-loader；
npm i webpack-cli --save-dev;安装 webpack-cli用于在命令行中运行webpack；- 配置webpack.config.js文件；
npm start运行webpack打包。
"script":{
"start":"webpack --config webpack.config.js"
}
//npm run start 与 npx webpack
windows中路径调用webpack时，要用反斜线"\”,如start =>
npm node_modules\.bin\webpack --config webpack.config.js；访问bin版本
配置webpack
//package.json
{
"name":"demo",
"version":"1.0.0",
"description":"",
+ "private":true,//私有化，不发布
- "main":"index.js",
"scripts":{
"start":"npm webpack --config webpack.config.js",
"public":"npm webpack"
},
"devDependencies":{
"webpack":"^5.0.0",
"webpack-cli":"^3.0.0"
},
"dependencies":{}
}
//webpack.config.js
const HtmlWebpackPlugin = requrie("html-webpack-plugin");
const CleanWebpackPlugin = requrie("clean-webpack-plugin");
module.exports = {
mode:"development",
entry:"./src/index.js",
output:{
filename:"bundle.js",
path:__dirname + "/dist"
},
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},{ //url-loader封装了file-loader
test:/\.(jpg|jpeg|png|gif|svg)$/,
// use:'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/'
use:{
loader:["url-loader"],
options:{
limit:10*1024,
name:"[path][name].[ext]",
outputPath:"img/",
publicPath:"output/"
}
}
]
},
plugins:[
new CleanWebpackPlugin("./dist"),
new HtmlWebpackPlugin({
templete:"./tmp.html"
})
]
}
加载其他类型文件
通过配置方式指定 loader 规则1(loader rules)、插件2 (plugins)、解析选项(resolve options)，以及许多其他增强功能
1.css-loader style-loader
npm install --save-dev css-loader style-loader
其中css-loader编译css文件后style-loader插入html中；
module.exports = {
//...
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
}
]
}
}
2.file-loader
npm install --save-dev file-loader
编译成__dirname地址，不同于url-loader二进制源文件；
加载背景和图片：
module.exports = {
//...
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},{
test:/\.(jpg|jpeg|png|gif|svg)$/,
use:["file-loader"]
},{
test:/\.(jpg|jpeg|png|gif|svg)$/,
use:{
loader:["url-loader"],
options:{
limit:"1024"
}
}
}
]
}
}
加载字体：
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
}
3.csv-loader xml-loader
npm --save-dev csv-loader xml-loader
加载数据 json/csv/tsv/xml：webpack内置解析json，而csv、xml需要csv-loader、xml-loader；
{
test:/\.(csv|tsv)$/,
use:["csv-loader"]
},{
test:/\.xml$/,
use:["xml-loader"]
}
4.html-webpack-plugin
npm install --save-dev html-webpack-plugin处理html文件：
//webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode:"development",
entry:"index.js",
output:{filename:"bundle.js",path:__dirname+"/dist"},
plugins:[
new HtmlWebpackPlugin({title:"val"})
]
}
默认会生成新的index.html
5.clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
清理/dist文件夹：
//webpack.config.js
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports={
entry:{},
output:{filename:"",path:""},
plugins:[
new CleanWebpackPlugin("./dist")
]
}
开发模式：development
source map
development模式下代码未压缩，错误和警告追踪，通过devtool配置,更多选项：
module.exports = {
//...
devtool:"inline-source-map",
//...
}
热更新
- webpack`s Watch Mode
- webpack-dev-server
- webpack-dev-middleware
1.Watch模式
//package.json
{
"name":"demo",
//...
"scripts":{
"watch":"webpack --watch"//npm run watch
}
//...
}
监测更新自动打包代码，但是浏览器不能自动刷新。
2.webpack-dev-server在development模式下不生成静态文件：
npm webpack-dev-server --open -w
配置总表示例
//package.json
{
"name":"demo",
"version":"1.0.0",
"description":"",
+ "private":true,
- "main":"index.js",
"scripts":{
"start":"npm webpack --config webpack.config.js",
"public":"npm webpack"
},
//安装各种插件
"devDependencies":{
"webpack":"^5.0.0",
"webpack-cli":"^3.0.0"
//......
},
"dependencies":{}
}
//webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
mode:"development",//production
entry:{
app:".src/app.js"
//name:"xxx.js"
},
output:{
filename:"[name].bundle.js",
path:__dirname + "/dist"
}
module：{
rule:[
{ //加载css文件
test:/\.css$/,
use:["style-loader","css-loader"]
},{ //加载图片——dirname地址
test:/\.(png|jpg|jpeg|svg|gif)/,
use:["file-loader"]
},{ //url-loader封装了file-loader
test:/\.(png|jpg|jpeg|svg|gif)/,
//use:'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/'
use:{
loader:["url-loader"],
options:{
limit:"1024",
name:"[name].[hash].[ext]",
outputPath:"img/",
publicPath:"output/"
}
}
},{ //加载字体@font{}
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
},{ //加载csv文件
test:/\.(csv|tsv)$/,
use:["csv-loader"]
},{ //加载xml文件
test:/\.xml$/,
use:["xml-loader"]
}
]
},
plugins:[
new CleanWebpackPlugin("./dist"),
new HtmlWebpackPlugin({
temple:("./tmp.html")
})
]
}
Manifest:webpack-manifest-plugin记录整个bundle的过程;