目录
一、npm
node环境–>>npm–>>webpack–>>cli
- npm install就有了package.json和node_module文件夹(npm得以运行的条件)
- package.json记录了需要安装的依赖(如果package.json记录了一些依赖,那么就直接npm install就行)
- npm install webpack webpack cli -D就有了module和package.lock.json
就可以局部webpack了,有三种方法
一种是./module/bin/webpack
一种是npx webpack
一种是配置指令build=‘webpack’ - 之后npm run build,就会默认从src/index.js开始打包
- 如果想自己定义入口出口:
方式一:npx webpack --entry ./src/main.js --output-path ./build
方式二:npm run build (其中要在package.json里写指令时,build=‘webpack --entry
./src/main.js --output-path ./build’ 这样难以维护 - 为了解决5难以维护的问题,于是在项目里出现了 webpack.config.js 代码如下
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'./build')
filename:'bundle.js'
}
}
二、webpack使用
webpack不认识.css,不处理会报错,于是需要手写css-loader,但是webpack有很强大的社区,直接调用社区里的cssloader即可,不用手写
- 第一步:npm install css-laoder -D
- 第二步:指定css使用哪个loader
方式一:内联方式:在加载css时候,写上import “css-loader!../css/style.css”;
方式二:CLI方式(webpack5不再使用):
方式三(推荐):配置方式:代码如下
webpack.config.js
代码如下 const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'./build')
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/ 正则表达式
//三种形式:
loader:"css-loader" //下边use的语法糖
use:[
{loader:"css-loader",options:{}}
"css-loader"
]
}
}
这样css仍然不会生效,需要导入style-loader,作用:在html中生成
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'./build')
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/ 正则表达式
use:[
//先执行css-loader,在执行style-loader
"style-loader",
"css-loader"
]
}
}
三、常见loader
3.1 postCSS-loader
postCSS-loader通过辨识浏览器(火狐啊,谷歌等),改变css值的工具
用法:
npm install postcss-loader-D
在css文件中写上
`user-selection:none`
在webpack.js中写上
use:[
{loader:"css-loader",options:{}}
{loader:"post-loader",
options:{
postcssOptions:{
plugins:[
require("autoprefixer")
]
}
}
}
]
3.2 file-loader
情景:使用图片两种方式:
在js中create一个div,然后设置这个div的class,然后在css中,导入图片,这样是可以的
还有一种是在js中create一个img标签,然后设置这个img.src,直接这样用是不行的,不会打包这个图片的,因为html会把img.src后边的字符串放到index.html中,但是路径对于js来说和index.html是不同的,所以不会生效。
解决方法:把图片当成一个模块,在js中,最上边import nhltImg from …/img/nhlt.png
下边imgEl.src=nhltImg;
更改图片的打包规则:
webpack.config.js
代码如下
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'./build')
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/ 正则表达式
use:[
{loader:"css-loader",options:{}}
{loader:"file-loader",options:{
outputpath:"img",
name:"[name]_[hash:6].[ext]"
}}
]
}
}
3.3 uri-loader
file-loader有一个坏处,就是静态服务器有bundle.js,图片一,图片二,index.html
会请求4次,很浪费
把小的图片base64编码成uri,嵌入到bundle.js里,
使用:把fileloader改成uriloader既可
{loader:“url-loader”,options:{
outputpath:“img”,
name:“[name]_[hash:6].[ext]”
limit:100*1024(byte)
}}
3.4 asset module type
上边使用file-loader或者uri-loader都是webpack5之前的事了,但是从webpack5之后,可以直接使用资源模块类型(asset module type),来代替loader
{
test:/\.(jpe?g|png|gif|svg)$/ ,正则表达式
loader:"css-loader"
type:"asset",这样写会自动选择uri file
generator:{
filename:"img/[name]_[hash:6][ext]"
},
parser:{
dataUrlCondition:{
maxsize:100*1024
}
}
name:"[name]_[hash:6].[ext]"
}
四、插件
情景:
每次build时,都需要把dist文件给删了
太麻烦了,怎么办呢?
插件!
webpack中loader是转换模块的,而插件是帮助我们完成其他的一些任务的
4.1 cleanWebpackPlugin插件
cleanwepackplugin插件:
npm install clean-webpack-plugin -D
//loader是use中手写上就行
//而plugin是在webpack.config.js最上边写上
const { CleanWebpackPlugin } = require("clean-webpack-plugin");//从webpack生态里导进一个类来,
然后在modules{xxx}
下边写个plugins:[
一个个插件对象
比如new CleanWebpackPlugin()
]
4.2 htmlWebpackPlugin插件
htmlWebpackPlugin
打包html使用的插件
先安装npm install
const HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({
template:"./ //这里配置index.html的路径,一般都事先配置了一些规范,打包时按 照规范来打包出新的index.html
})
4.3 CopyWebpackPlugin插件
CopyWebpackPlugin
把favicon.icon这些静态文件复制到dist里用的插件
五、其他配置
情景:在xiaoming.js中写了一句错误代码,导致项目运行时报错,在控制台排查时,提示bundle.js(打包后的js)第一行错误,于是打开bundle.js,发现代码只有一行(被压缩了),所以没法排查,于是这样配置:
mode的配置非常重要,不同的mode很多内部的配置是不同的,一般准备上线时改成“production”
devtool:“sourcr-map”
这样配置后,如果项目运行时出现了错误,直接去xiaoming.js中查找错误即可
(bundle.js旁边会多一个bundle.js.map,这个不用管他)
module.exports={
//设置模式,准备上线时改成production
//模式很重要,省下配置很多东西
mode:"development"
//设置js映射文件方便调试错误
devtool:"sourcr-map"
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'./build')
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/ 正则表达式
loader:"css-loader" 下边use的语法糖
use:[
{loader:"css-loader",options:{}}
{loader:"file-loader",options:{
outputpath:"img",
name:"[name]_[hash:6].[ext]"
}}
]
}
}