/**
* 开发环境下配置
*
*/
// webpack.config.js 配置文件
const { resolve } = require('path') // 安装node.js自带
const MtmlWebpackPlugin = require('html-webpack-plugin') //需要npm安装
// 提取css成单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //需要npm安装
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') //需要npm安装
module.exports= {
entry: './src/index.js', //入口文件,单入口
//多文件入口
entry:{
main: './src/index.js',
test: './src/test.js'
}
output: {
filename: 'js/build.js', //打包输出文件
// _dirname node.js变量表示当前文件目录绝对路径
// build 打包后的文件名
path: resolve(__dirname, 'build'),
clean: true 清除上次打包文件
},
// loader 配置
module:{
rules:[
{
// 正则匹配.css结尾的文件
test: /\.css$/,
// 使用那些loader进行处理
use:[
// loader执行顺序从右到左 css-loader -> style-loader
// "style-loader",
// MiniCssExtractPlugin.loader 取代style-loader
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
// 处理less资源
test: /\.less$/,
// 需要安装两个模块,less,less-loader
use:[
"style-loader",
"css-loader",
"less-loader",
]
},
{
// 处理html中img资源
text: /\.html$/,
loader: "html-loader"
},
// 处理图片资源
{
test: /\.(png|jpg|gif)$/,
// 多个loader需要处理使用use,单个使用loader即可
loader: 'url-loader',
options:{
// 表示图片大小,小于8kb,就会被base64处理
limit: 8 * 1024,
name:"[hash:10].[ext]", //名字取哈希地址前10位,[ext]取原来的拓展名
outputPath:'image', // 将处理好的img放到image文件中去
// 关闭es6模块化
esModule: false
}
},
// 处理其它的资源
{
exclude: /\.(png|jpg|css|less|gif|js|html)$/,
loader: "file-loader",
options:{
outputPath:'tool', //将处理好的文件放到tool文件中
name: "[hash:10].[ext]" //名字取哈希地址前10位,[ext]取原来的拓展名
}
}
]
},
// plugins 插件配置
plugins:[
// 将打包好的文件自动引入到index.html
new MtmlWebpackPlugin({
template: './src/index.html',
filename: 'app.html', 重命名文件
inject: 'body', 自定义script生成的位置在bod里面
// js,html压缩
minify:{
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new MiniCssExtractPlugin({
// 设置输出文件名
template: 'css/pulice.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
// 打包模式
mode: 'development', //开发环境
// mode: 'production' //生产环境
devtool: 'inline-source-map' //在开发模式下追踪代码
// 开发服务器,用来自动化编译,自动打开浏览器,自动刷新浏览器
// 启动devServer指令:npx webpack-dev-server 需要npm下载此包
devServer:{
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3306,
// 自动打开浏览器
open: true
}
}