1.下载 node.js
2.本地安装 webpack
npm install webpack webpack-cli --save-dev
3.运行 npx webpack
4.自定义Webpack配置
在根目录下创建 webpack.config.js
// 在 webpack.config.js 先简单配置
const path = require('path')
module.exports={
entry:'./src/index.js', //打包入口 单个
output:{
filename:'bundle.js', //打包生成js 单个
path:path.resolve(__dirname,'./dist'),
},
}
npm i html-webpack-plugin -D //自动打包生成html文件、不需要自己再配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
plugins:[
new HtmlWebpackPlugin({
template:'./index.html', //打包生成的html模板
filename:'app.html', //打包生成的html名字
inject:'body', //打包生成的script标签放在html那个位置
}),
],
}
1.1 每次打包自动删除上次打包的文件
npm i clean-webpack-plugin -D
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
module.exports={
plugins:[
cleanPlugin
],
}
1.2 开发时出现报错信息能找到是哪行
module.exports={
devtool:'eval-source-map'
}
1.3 实时重新加载功能
npm i webpack-dev-server
module.exports={
devServer:{
static:'./dist'
},
}
1.4 资源模块
//无需下载 直接配置
module.exports={
module:{
rules:[
{
test:/\.png$/,
type:'asset/resource', //生成单独文件并导出url 加载任何资源
generator:{
filename:'images/[contenthash][ext]' //打包图片存放的路径 优先级高于 assetModuleFilename
}
},
{
test:/\.svg$/,
type:'asset/inline', //base64格式 不会在image中显示
},
{
test:/\.txt$/,
type:'asset/source', //文本文件 不会在image中显示
},
{
test:/\.jpg$/,
type:'asset', //通用资源文件 在resource与inline之间选择
parser:{
dataUrlCondition:{
maxSize:4*1024*1024 //大于4m用resource
}
}
},
]
}
}
抽离和压缩css
npm i mini-css-extract-plugin -D //webpack5才能使用 打包css文件
在模块中配置以下代码
const MinicssExtractPlugin = require('mini-css-extract-plugin')
module.export={
plugins:[
new MinicssExtractPlugin({
filename:'style/[contenthash].css' //打包生成放在指定位置
})
],
module:{
rules:[
{test:/\.css$/,use:[MinicssExtractPlugin.loader,'css-loader']},
]
}
}
npm i css-minimizer-webpack-plugin -D //将打包抽离和压缩的css进行压缩
//在模块中配置以下代码
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports={
mode:'production', // production 生产 development
optimization:{
minimizer:[
new CssMinimizerPlugin()
]
}
}
// 打包项目中font字体
module.exports={
module:{
rules:[
{
test:/\.(woff|woff2|eot|ttf|otf)$/i, //打包font字体
type:'asset/resource'
}
]
}
}
打包项目中 csv tsv xml 文件
npm i csv-loader xml-loader -D
module.exports={
module:{
rules:[
{
test:/\.(csv|tsv)$/, //打包项目中 csv tsv 文件
use:'csv-loader'
},
{
test:/\.xml$/, //打包项目中 xml 文件
use:'xml-loader'
}
]
}
}
打包自定义json模块parser
npm i toml yaml json5 -D
const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')
module.exports={
module:{
rules:[
{
test:/\.toml$/, //打包项目中 xml 文件
type:'json',
parser:{
parse:toml.parse
}
},
{
test:/\.yaml$/, //打包项目中 xml 文件
type:'json',
parser:{
parse:yaml.parse
}
},
{
test:/\.json5$/, //打包项目中 xml 文件
type:'json',
parser:{
parse:json5.parse
}
},
]
}
}
将es6转es5
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D
babel-loader //在webpack里应用babel解析es6的桥梁
@babel/core //babel的核心模块
@babel/preset-env //babel预设 一组babel插件的集合
module.exports={
module:{
rules:[
{
test:/\.js$/, //es6转es5
exclude:/node_modules/, // 排除里面的js
use:{
loader:'babel-loader',
options:{
plugins:['@babel/preset-env']
}
}
}, //打包处理高级js文件
]
}
}
代码分离方法
1.入口起点
module.exports={
entry:{
index:'./src/index.js' ,
other :'./src/hello.js' //打包入口 多个
},
output:{
filename:'[name].bundle.js', //打包生成js 多个
},
}
2.防止重复
module.exports={
entry:{
index:{
import:'./src/index.js',
dependOn:'shared'
},
other:{
import :'./src/hello.js',
dependOn:'shared'
},
shared:'loadsh' //将含有loadsh模块打包到shared
},
optimization:{
splitChunks:{
chunks:'all' //将公共代码抽离
}
}
}
完整代码
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
const MinicssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')
module.exports={
entry:'./src/index.js', //打包入口 单个
// entry:{
// index:'./src/index.js' ,
// other :'./src/aaa.js' //d打包入口 多个
// },
// entry:{
// index:{
// import:'./src/index.js',
// dependOn:'shared'
// },
// other:{
// import :'./src/hello.js',
// dependOn:'shared'
// },
// shared:'loadsh' //将含有loadsh模块打包到shared
// },
output:{
// filename:'bundle.js', //打包生成js 单个
filename:'[name].bundle.js', //打包生成js 多个
path:path.resolve(__dirname,'./dist'),
assetModuleFilename:'images/[contenthash][ext]' //打包图片存放的路径
}, //打包出口
mode:'production', // production 生产 development
devtool:'eval-source-map', //开发时出现报错信息能找到是哪行
devServer:{
static:'./dist'
// open:true, //自动打开浏览器
// host:'127.0.0.1', //地址
// port:80 //选择打开端口号
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html', //打包生成的html模板
filename:'app.html', //打包生成的html名字
inject:'body', //打包生成的script标签放在html那个位置
}),
new MinicssExtractPlugin({
filename:'style/[contenthash].css' //打包生成放在指定位置
}),
cleanPlugin
],
module:{
rules:[
{
test:/\.png$/,
type:'asset/resource', //生成单独文件并导出url 加载任何资源
generator:{
filename:'images/[contenthash][ext]' //打包图片存放的路径 优先级高于 assetModuleFilename
}
},
{
test:/\.svg$/,
type:'asset/inline', //base64格式 不会在image中显示
},
{
test:/\.txt$/,
type:'asset/source', //文本文件 不会在image中显示
},
{
test:/\.jpg$/,
type:'asset', //通用资源文件 在resource与inline之间选择
parser:{
dataUrlCondition:{
maxSize:4*1024*1024 //大于4m用resource
}
}
},
{test:/\.css$/,use:[MinicssExtractPlugin.loader,'css-loader']}, //打包处理css文件 loader从后往前调用
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //打包处理less文件 loader从后往前调用
{
test:/\.(woff|woff2|eot|ttf|otf)$/i, //打包font字体
type:'asset/resource'
},
{
test:/\.(csv|tsv)$/, //打包项目中 csv tsv 文件
use:'csv-loader'
},
{
test:/\.xml$/, //打包项目中 xml 文件
use:'xml-loader'
},
{
test:/\.toml$/, //打包项目中 xml 文件
type:'json',
parser:{
parse:toml.parse
}
},
{
test:/\.yaml$/, //打包项目中 xml 文件
type:'json',
parser:{
parse:yaml.parse
}
},
{
test:/\.json5$/, //打包项目中 xml 文件
type:'json',
parser:{
parse:json5.parse
}
},
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env'],
plugins:[
['@babel/plugin-transform-runtime']
]
}
}
}, //打包处理高级js文件
]
},
optimization:{
minimizer:[
new CssMinimizerPlugin() //将打包抽离和压缩的css进行压缩
],
splitChunks:{
chunks:'all' //将公共代码抽离
}
}
}
