webpack 默认识别js文件, 可以使用 CommonJs (模块化开发)语法 , 也可以使用 es6 (模块化开发)的语法
webpack的基础配置
安装webpack和webpack-cli
插件
npm init -y
npm i webpack webpack-cli --save-dev
配置启动命令
在package.json 文件的scripts 字段中配置启动命令(打包命令), 配置一个开发环境development,一个生产环境production
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production"
},
搭建项目的结构
在 项目的根目录下 创建一个src文件夹, 在该文件夹下创建一个 index.js 文件 作为默认的入口文件,
- src
- index.js
运行命令
命令是二选一 ; 运行命令后,自动生成dist文件夹, 文件夹下会有一个默认的main.js文件,这就是打包编译后生成的产物
npm run dev // 开发
npm run build // 生产
webpack的配置文件 webpack.config.js
webpack 默认处理js文件,如果想要处理其他的文件或者实现其他的功能,需要借助于插件或者loader
webpack的入口
- 单个入口; 可以指定入口文件名
module.exports = {
entry:'./src/index.js'
}
- 多个入口, 合并成一个文件输出
module.exports = {
entry:['./src/index.js', './src/list.js', ...]
}
- 多入口配置 对应多个出口, 每个输出的文件必须有唯一的标识名
对象的 key 就是输出文件的名字
module.exports = {
entry:{
index:'./src/index.js',
app:'./src/app.js'
}
}
webpack的出口
- 单一出口 或者 多个入口, 合并成一个文件输出
const path = require('path')
module.exports = {
// 入口配置方式1
entry:'./src/index.js' ,
// 入口配置方式2
entry:['./src/index.js', './src/list.js', ...]
// 配置出口
output:{
// path 属性 配置 输出文件的目录 dist 存放文件的文件夹 名(可以自定义,但是通常使用都是dist)
path:path.resolve(__dirname, 'dist')
// filename 属性 配置的 是输出文件名和路径(放到指定的文件夹下)
// filename:'demo.js'
filename:'js/demo.js'
}
}
- 多出口的配置
const path = require('path')
module.exports = {
entry:{
index:'./src/index.js',
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname, 'dist'),
// [name] 自动映射 entry 中的key 就是输出的文件名
filename:'[name].js'
}
}
webpack的插件
常用插件:
-
clean-webpack-plugin 清理目录
-
html-webpack-plugin 通过模板html文件生成出口含有外链式的html文件
-
mini-css-extract-plugin css样式
插件使用的常规步骤
- 下载安装插件
- 在 webpack.config.js 文件中引入
- 在 plugins 字段中进行配置
自动管理 dist 文件夹
使用 clean-webpack-plugin 插件 ;
// 1 下载
npm i clean-webpack-plugin --save-dev
在 webpack.config.js 文件中引入 并进行配置
// 高版本引入方式
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 低版本直接引入
// const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
plugins:[
new CleanWebpackPlugin()
]
}
2 使用webpack内置的配置项管理dist文件夹
const path = require('path')
module.exports = {
entry:{
index:'./src/index.js',
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname, 'dist'),
// [name] 自动映射 entry 中的key 就是输出的文件名
filename:'[name].js',
// 通过 webpack的内置配置项 output.clean 管理dist文件夹
clean:true
}
}
自动生成html 文件
使用html-webpack-plugin插件
npm i html-webpack-plugin --save-dev
在webpack.config.js中引入配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:{
index:'./src/index.js',
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname, 'dist'),
// [name] 自动映射 entry 中的key 就是输出的文件名
filename:'[name].js'
},
plugins:[
// 生成默认项
// new HtmlWebpackPlugin()
// 进行先关的配置 单页面配置
/* new HtmlWebpackPlugin({
// template 模板文件 根据该模板生成html文件
template:'url',
// filename: 生成的文件名 可以自定义
filename:'demo.html'
}) */
// 多页面配置
new HtmlWebpackPlugin({
// template 模板文件 根据该模板生成html文件
template:'./src/index.html',
// filename: 生成的文件名 可以自定义
filename:'index.html',
// 指定引入的js文件 , 数组中的值 和 enrty 的key 进行映射
chunks:['index']
}),
new HtmlWebpackPlugin({
// template 模板文件 根据该模板生成html文件
template:'./src/news.html',
// filename: 生成的文件名 可以自定义
filename:'news.html',
chunks:['app']
})
]
}
配置的模板Html在dist文件中会映射为带有引入出口js文件的文件
webpack的loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import
或 “load(加载)” 模块时预处理文件。(tip:相当于将html文件中所有引入的文件统一管理,因为在模板Html中引入文件的路径和在出口html文件不一样)
webpack的loader 需要下载, 不用引入,直接在 webpack.config.js的module
下rules
下test
和user
字段中进行配置
常用loader:
-
file-loader
-
url-loader
-
css-loader
-
sass-loader
-
style-loader
-
babel:将es6转为es5 "@babel/core": "^7.13.14", "@babel/plugin-transform-runtime": "^7.13.10", "@babel/preset-env": "^7.13.12", "babel-loader": "^8.2.2",
处理不同的文件是通过正则匹配不同的后缀实现的。
处理css文件
在js入口文件中将css文件作为模块导入
import './css/demo.css'
在配置文件中需要使用style-loader 和 css-loader
const path = require('path')
module.exports = {
entry:'./src/index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
module:{
rules:[
// 每个对象就是一个loader的配置
{
test:/\.css$/,
use:['style-loader', 'css-loader']
}
]
},
plugins:[
]
}
处理sass文件
入口文件引入同css
module:{
rules:[{
test:/\.scss|sass$/,
use:['style-loader', 'css-loader','sass-loader']//注意顺序
}]
}
处理图片
入口文件引入同css
module:{
rules:[{
test:/\.jpg|jpeg|png|gif|webp$/, //这里可能需要将webp放最后,放前边报错
use:[{
loader:'url-loader',
options:{
// 限定文件大小 :如果资源小于指定的值,则自动转换为base64编码格式,如果大于指定的值,则正常显示
limit:1024,
// name 属性 配置 输出文件的路径和名字
name:'image/[name].[ext]'
}
}]
}]
}
es6转es5
module.exports = {
entry:'./src/index.js',
output:{
path:path.resolve(__dirname, 'dist'),
// webpack 默认采用es6 语法生成打包文件
environment:{
// The environment supports arrow functions ('() => { ... }')
arrowFunction:false // 不使用箭头函数
}
},
module:{
rules:[
{
test:/\.js$/,
// 不匹配 node_modules中的文件
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}