初始化项目
npm init -y
npm install webpack webpack-cli -D
在创建src目录和dist目录
配置文件webpack.config.js
基本配置
const path=require('path');
module.exports={
entry: './src/index.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js' // 打包后的文件名也可配置成动态的 '[name].[hash:8].js',hash长度可自由设置最长为20位
},
module: {},
plugins: [],
devServer: {}
}
entry：配置入口文件的地址
output：配置出口文件的地址
module：配置模块,主要用来配置不同文件的加载器
plugins：配置插件
devServer：配置开发服务器
package.json文件配置
"build": "webpack --mode development" // 生产环境(production),开发环境（development）
编译css文件
npm install stlye-loader css-loader -D
配置文件webpack.config.js
module: {
rules: [
{
test:/\.css$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
loader:["style-loader","css-loader"] // 使用use和loader都可以loader
}
]
},
配置devServer便于开发
npm install webpack-dev-server -D
// 配置静态资源服务器，可以用来预览打包后的项目
devServer: {
contentBase: './dist', // 静态文件根目录
host: 'localhost', // 配置host，也可写成IP的形式
port: 8080, // 配置端口号
compress: true, //是否启用gzip压缩
}
package.json文件配置 (--oepn,自动打开浏览器预览)
"dev": "webpack-dev-server --open --mode development"
安装html-webpack-plugin
npm install html-webpack-plugin -D
在配置文件中引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
在plugins中配置
plugins: [
// 此插件可以自动生成HTML文件
new HtmlWebpackPlugin({
minify:{ // 是否进行压缩
removeAttributeQuotes: true, //移除属性的引号
},
template: './src/index.html', // html模板
filename: 'index.html', // 生成的HTML文件名
hash: true,// 会在引入的 js 中加入hash避免缓存
title: '欢迎使用webpack' //生成的HTML文件插入的 title内容
})
],
配置多入口,将entry配置成数组形式或对象形式
entry: ['./src/index.js','./src/base.js'],
entry: {
index: './src/index.js',
base: './src/base.js'
},
清除多次打包产生的重复文件
npm i clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin')
new CleanWebpackPlugin([path.join(__dirname,'dist')]) // 先将dist清空再编译
多页面可以配置多个HtmlWebpackPlugin
entry: {
index: './src/index.js',
base: './src/base.js'
},
new HtmlWebpackPlugin({
minify:{ // 是否进行压缩
removeAttributeQuotes: true, //移除属性的引号
},
chunks:['index'],//在产出的html文件里引入哪些代码块,分离js文件
template: './src/index.html', // html模板
filename: 'index.html', // 生成的HTML文件名
hash: true,// 会在引入的 js 中加入hash避免缓存
title: '欢迎使用webpack' //生成的HTML文件插入的 title内容
}),
new HtmlWebpackPlugin({
minify:{ // 是否进行压缩
removeAttributeQuotes: true, //移除属性的引号
},
chunks:['base'],//在产出的html文件里引入哪些代码块
template: './src/index.html', // html模板
filename: 'base.html', // 生成的HTML文件名
hash: true,// 会在引入的 js 中加入hash避免缓存
title: '欢迎使用webpack' //生成的HTML文件插入的 title内容
}),
抽离公共js文件
entry: {
index: './src/index.js',
base: './src/base.js',
vendor: './src/common.js' // 抽离公共js文件
},
chunks:['index','vendor'],//在产出的html文件里引入哪些代码块,分离js文件,在各自的代码块加入公共js
webpack解析图片模块
npm i file-loader url-loader -D
{
// file-loader(将文件转化为二进制数据)是解析图片地址，把图片从原位置拷贝到目标位置并且修改原原引用地址
test:/\.(png|jpg|jpeg|gif|svg|bmp)$/,
use:{
loader: "file-loader",
outputPath: '/images' // 指定打包图片的输出目录
},
},
解析img标签引入的图片
npm i html-withimg-loader -D
{
// file-loader(将文件转化为二进制数据)是解析图片地址，把图片从原位置拷贝到目标位置并且修改原原引用地址
test:/\.(html|htm)$/,
use:"html-withimg-loader",
}
将小尺寸图片转为base64格式
{
// file-loader(将文件转化为二进制数据)是解析图片地址，把图片从原位置拷贝到目标位置并且修改原原引用地址
// url-loader 可以将比较小的文件转换为base64格式内嵌到HTML 中减少HTTP请求,是file-loader 的增强版包含了file-loader的功能
test:/\.(png|jpg|jpeg|gif|svg|bmp)$/,
use:[
// {
// loader: "file-loader",
// options:{
// outputPath: 'images/' // 指定打包图片的输出目录
// }
// },
{
loader: "url-loader",
options:{
limit: 10*1024,
outputPath: 'images/'
}
},
]
},
解析less和scss(需分开安装，一起安装容易报错)
npm i less less-loader -D
npm i node-sass sass-loader -D
webpack配置
{
test:/\.less$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
loader:["style-loader","css-loader","less-loader"]
},
{
test:/\.scss$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
loader:["style-loader","css-loader","scss-loader"]
},
抽离公共css代码
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入这个插件
const devMode = process.env.NODE_ENV !== 'production'
plugins: [
]
修改loader配置
原配置
{
test:/\.css$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
loader:["style-loader","css-loader"]
},
{
test:/\.scss$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
loader:["style-loader","css-loader","sass-loader"]
},
修改后
{
test:/\.css$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
//这个插件先用css-loader 处理一下css文件
loader:cssExtract.extract({
use:["css-loader"]
})
},
{
test:/\.(sa|sc|c)ss$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
css自动添加浏览器前缀
npm i postcss-loader autoprefixer -D
{
test:/\.css$/,
// css-loader 用来解析 css 文件中的url路径
// style-loader 可以把css文件变成 style 标签插入head中
// 多个loader 是有顺序要求的,从右往左转换
//这个插件先用css-loader 处理一下css文件
// use: [ MiniCssExtractPlugin.loader,"css-loader"]
use: [ "style-loader","css-loader","postcss-loader"]
},
src目录下新建postcss.config.js配置文件
module.exports ={
plugins:[require('autoprefixer')]
}