// webpack.config.js 命令文件
// 配置文件
const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //每次打包先清除dist目录
const HtmlWebpackPlugin = require('html-webpack-plugin'); //把打包好的文件路径生成script 加入 index.html中
// console.log(__dirname,"path")
// console.log(path.resolve(__dirname),"path2")
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //分离css成文件
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css
const TerserJSPlugin = require('terser-webpack-plugin');
let htmlPlugins = ['index','other'].map(chunkName => {
return new HtmlWebpackPlugin({
template: `./${chunkName}.html`,
filename:`${chunkName}.html`,
chunks: [ chunkName]
})
})
module.exports = {
// entry:"./src/index.js", //单个的入口文件
// output:{
// // hash chunkHash contentHash
// filename:'bundle.js',
// path: path.resolve(__dirname , "dist" )
// },
optimization:{
minimizer:[ //压缩的css和js
new OptimizeCssAssetsPlugin(),
new TerserJSPlugin()
]
},
entry:{
index:'./src/index.js',
other:'./src/other.js'
},
output:{
filename: '[name].js',
path:path.resolve(__dirname, "dist")
},
module:{
rules:[
// 运行的是从下往上运行
// {
// test:/.css$/,
// use:'css-loader'
// },
// {
// test:/.css$/,
// use:'style-loader',
// enforce:'post' //pre 优先加载 post表示最后加载
// }
// 另一种写法
{
test:/.css$/,
// use:['style-loader', 'css-loader'] ,//从右往左解析
use:[
// 'style-loader',
{
loader:MiniCssExtractPlugin.loader //用了分离的css, 上边的style-loader就不需要了
},
{
loader:'css-loader',
options:{
importLoaders:2 //用后面的几个loader来解析
}
},'postcss-loader','less-loader'
] //从右往左解析
},
{
test:/.less$/,
use:['style-loader','css-loader','less-loader']
},
// {
// test:/.(jpg|jpeg|gif)$/,
// use:{
// loader: 'file-loader',
// options:{
// name:'img/[name].[ext]',
// }
// }
// },
{
test:/.(jpg|jpeg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:10*1024, //100kb
outputPath:'/img',
publicPath:'http://test/img'
}
}
}
]
},
devServer:{ //在内存中打包,所有的内容是在根目录
port:'7777',
open:true,
compress:true,
contentBase: 'static', //启动配置一个可访问的静态资源文件
hot:true
},
plugins:[
new MiniCssExtractPlugin({
filename:'css/main.css' //设置分离出的css存放的目录和文件名
}),
// new CleanWebpackPlugin({
// cleanOnceBeforeBuildPatterns:['cc/*','!cc/a.js']
// }) //清空输出的目录
new CleanWebpackPlugin(),
...htmlPlugins
// new HtmlWebpackPlugin({
// template:'./index.html', //依赖的模板文件
// hash:true,
// filename:'index.html' ,//打包后的html文件
// minify:{
// removeAttributeQuotes: true , //删除引号
// collapseWhitespace: true // 删除空格
// },
// chunks:['index']
// }),
// new HtmlWebpackPlugin({
// template:'./index.html', //依赖的模板文件
// hash:true,
// filename:'other.html' ,//打包后的html文件
// chunks:['other']
// })
]
}
1. html-webpack-plugin 把打包好的文件路径生成script 加入 index.html中。
2. clean-webpack-plugin 每次打包先清除dist目录。
3.webpack-dev-server 创建本地服务器,自动重新构建,自动打开浏览器并刷新
4.解析css 需要: css-loader style-loader
5.解析less 需要 : less less-loader
sass: node-sass sass-loader
stylus: stylus stylus-loader
7. css私有前缀 postcss-loader (样式处理工具) autoprefixer (私有前缀的插件)
8.分离css的插件 mini-css-extract-plugin
9. file-loader url-loader 图片文件处理