const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*const HtmlWebpackInlineSourcePlugin=require('html-webpack-inline-source-plugin');*/
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const glob = require('glob');
const proxyHost = "http://192.168.2.236:5858";
// const proxyHost = "http://192.168.2.241:5858";
// const proxyHost = "http://192.168.4.222:5858";
// const proxyHost = "http://192.168.3.117:5858";//铁钢
// const proxyHost = "http://192.168.3.113:5858";//王峰
let entries = {vendor:'lodash'},plugines = [];
function getentries() {
let entryFiles = glob.sync('./src/js/**/*.js')
let htmls = glob.sync('./src/html/**/*.html');
for (var i = 0; i < entryFiles.length; i++) {
var filePath = entryFiles[i];
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
entries[filename] = filePath;
}
for (var i = 0; i < htmls.length; i++) {
var filePath = htmls[i];
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
let conf = {
filename: filename + '.html',
template: filePath, // html模板路径
inject: true,
chunks: [filename, 'vendor', 'common', 'scrollBar'],
hash: true, //防止缓存
minify: {
removeAttributeQuotes: true, //压缩 去掉引号
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
};
plugines.push(new HtmlWebpackPlugin(conf));
}
}
getentries();
module.exports = {
entry: entries,
output: {
publicPath: '/', //这里要放的是静态资源CDN的地址
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
resolve: {
extensions: [".js", ".css", ".json"],
alias: {
'@': path.resolve('./src'),
'@src': path.resolve('./src'),
'@less': path.resolve('./src/css'),
'@images': path.resolve('./src/images'),
'@js': path.resolve('./src/js'),
} //配置别名可以加快webpack查找模块的速度
},
plugins: [ //多入口的html文件用chunks这个参数来区分
...plugines,
new CopyWebpackPlugin([{
from: 'src/resource',
to: path.resolve(__dirname, 'dist', 'resource'),
flatten: true, //false会拷贝原始文件夹路径
}]),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css'
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin()
],
optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
ie8: true,
compress: {
properties: false,
warnings: false
},
mangle: {
screw_ie8: false,
except: ['e']
},
output: {
beautify: true
},
sourceMap: false
}
})
],
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: {
noParse: /WdatePicker/,
rules: [{
test: /.js$/,
enforce: 'post',
loader: 'es3ify-loader'
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
]
},
{
test: /\.less$/,
use: [{
loader: MiniCssExtractPlugin.loader
},
'css-loader', 'less-loader'
]
},
{
test: /\.(png|gif|jpg|jpeg|svg|eot|ttf|woff|woff2)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10240,
esModule: false,
name: '[name]_[hash:6].[ext]',
outputPath: 'images/'
}
}],
exclude: /node_modules/
}, {
test: /.html$/,
use: 'html-withimg-loader'
}
]
},
// devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
mode: 'development',
devServer: {
contentBase: "./dist", //静态文件根目录
proxy: {
'/': proxyHost
},
hot: true,
openPage: 'login.html'
}
}