版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37615202/article/details/88640975
const webpack = require("webpack");
const os = require("os");
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const glob = require('glob');
//获取本地ip
let IPv4 = "0.0.0.0";
function getIPAdress() {
let network = os.networkInterfaces();
for (let devName in network) {
let iface = network[devName];
for (let i = 0; i < iface.length; i++) {
let alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
return alias.address;
}
}
}
}
try {
IPv4 = getIPAdress();
} catch (e) {
IPv4 = 'localhost';
}
//这儿开始配置
module.exports = {
//入口文件 单独一个可以写成直接字符串写入路径,如果有多个启动入口建议调用函数的类型
entry: getEntry(),
//打包文件名称及路径
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
},
//扩展webpack功能
plugins: [
//复制目标路径的文件
new CopyWebpackPlugin([{
from: './src/templates/old/*.html',
to: './',
flatten: true
},{
from: './src/css',
to: './css'
}]),
//打包之前先清除 之前dist目录下的文件
new CleanWebpackPlugin(['dist']),
//webpack 模块热更新 实时预览
new webpack.HotModuleReplacementPlugin()
],
//配置加载和转换规则
module: {
rules: [
{
test: /\.(scss|css)$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
//可以添加参数 对编译后的css进行压缩
use: ['css-loader?mincss', "sass-loader"]
})
},
{
test: /\.(png|svg|jpg|gif)$/,
exclude: /node_modules/,
use: [{
loader: 'url-loader',
}]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['webpack-replace-loader']
}
]
},
//webpack4.x 代码分离、共用代码及第三方插件(模块)
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
name: "common",
minChunks: 2,
minSize: 0
},
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10
},
}
}
},
//本地启服务 ip || localhost 配置
devServer: { //配置此静态文件服务器,可以用来预览打包后项目
inline: true, //打包后加入一个websocket客户端
hot: true, //热加载
contentBase: path.resolve(__dirname, 'dist'), //开发服务运行时的文件根目录
host: IPv4, //本机局域网ip
openPage: `apply.html`,
port: 9090, //端口号
compress: true //开发服务器是否启动gzip等压缩
}
};
function getEntry() {
var entry = {};
glob.sync('./src/templates/old/js/**/*.js').forEach(function (name) {
var start = name.indexOf('js/') + 3
var end = name.length - 3;
var eArr = [];
var n = name.slice(start, end);
eArr.push(name);
entry[n] = eArr;
})
return entry;
}