const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const proxyHost = "http://192.168.2.236:5050";
module.exports = {
entry: {
index: path.resolve(__dirname, 'src', 'index.js'),
page: path.resolve(__dirname, 'src', 'page.js'),
information: path.resolve(__dirname, 'src/js', 'information.js'),
drugInfo: path.resolve(__dirname, 'src/js', 'drugInfo.js'),
disclaimer: path.resolve(__dirname, 'src/js', 'disclaimer.js'),
scale: path.resolve(__dirname, 'src/js', 'scale.js'),
vendor: 'lodash', // 多个页面所需的公共库文件,防止重复打包带入
},
output: {
publicPath: '/', //这里要放的是静态资源CDN的地址
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
resolve: {
extensions: [".js", ".css", ".json"],
alias: {} //配置别名可以加快webpack查找模块的速度
},
plugins: [
// 多入口的html文件用chunks这个参数来区分
new HtmlWebpackPlugin({
title: 'index',
template: path.resolve(__dirname, 'src/html', 'index.html'),
filename: 'index.html',
chunks: ['index', 'vendor', 'common'],
inject: true,
hash: true, //防止缓存
minify: {
removeAttributeQuotes: true, //压缩 去掉引号
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({
title: 'page',
template: path.resolve(__dirname, 'src/html', 'page.html'),
filename: 'page.html',
chunks: ['page', 'vendor', 'common'],
inject: true,
hash: true, //防止缓存
minify: {
removeAttributeQuotes: true, //压缩 去掉引号
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({
title: 'information',
template: path.resolve(__dirname, 'src/html', 'information.html'),
filename: 'information.html',
chunks: ['information', 'vendor', 'common'],
inject: true,
hash: true, //防止缓存
minify: {
removeAttributeQuotes: true, //压缩 去掉引号
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({
title: 'drugInfo',
template: path.resolve(__dirname, 'src/html', 'drugInfo.html'),
filename: 'drugInfo.html',
chunks: ['drugInfo', 'vendor', 'common'],
inject: true,
hash: true, //防止缓存
minify: {
removeAttributeQuotes: true, //压缩 去掉引号
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({
title: 'disclaimer',
template: path.resolve(__dirname, 'src/html', 'disclaimer.html'),
filename: 'disclaimer.html',
chunks: ['vendor', 'common', 'disclaimer'],
inject: true,
hash: true, //防止缓存
minify: {
removeAttributeQuotes: true, //压缩 去掉引号
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({
title: 'scale',
template: path.resolve(__dirname, 'src/html', 'scale.html'),
filename: 'scale.html',
chunks: ['vendor', 'common', 'scale'],
inject: true,
hash: true, //防止缓存
minify: {
removeAttributeQuotes: true, //压缩 去掉引号
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'css/[name].css',
chunkFilename: '[id].css',
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
],
optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
name: "common",
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0, // This is example is too small to create commons chunks
reuseExistingChunk: true // 可设置是否重用该chunk
}
}
}
},
module: {
rules: [{// 多个loader是有顺序要求的,从右往左写,因为转换的时候是从右往左转换的
test: /\.js$/,
use: "imports-loader?$=jquery"
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
},
},
'css-loader',
],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{ //file-loader 解决css等文件中引入图片路径的问题
// url-loader 当图片较小的时候会把图片BASE64编码,大于limit参数的时候还是使用file-loader 进行拷贝
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'images/', // 图片输出的路径和存储路径保持一致
limit: 10000,
name: '[name].[ext]'
}
}
},
]
},
// devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
mode: 'development',
devServer: {
contentBase: path.join(__dirname, "dist"), //静态文件根目录
proxy: {
'/api': proxyHost
},
hot: true
},
}