const path = require("path");
|
const FileManagerPlugin = require("filemanager-webpack-plugin");
|
|
const resolve = dir => {
|
return path.join(__dirname, dir);
|
};
|
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉注释
|
const md5 = require("js-md5");
|
// gzip --start
|
const CompressionWebpackPlugin = require("compression-webpack-plugin");
|
const productionGzipExtensions = ["js", "css"]; // 需要gzip压缩的文件后缀
|
module.exports = {
|
// build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
|
outputDir: "dist",
|
|
// build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
|
assetsDir: "static",
|
|
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
|
indexPath: "index.html",
|
|
// 默认在生成的静态资源文件名中包含hash以控制缓存
|
filenameHashing: true,
|
publicPath: "./",
|
lintOnSave: process.env.NODE_ENV !== "production",
|
productionSourceMap: process.env.NODE_ENV !== "production",
|
devServer: {
|
port: 8080,
|
// 默认打开浏览器
|
open: true,
|
disableHostCheck: true,
|
proxy: {
|
"/api/": {
|
// 代理api
|
target: "http://10.1.1.163/", // 服务器api地址-
|
changeOrigin: true, // 是否跨域
|
ws: true, // proxy websockets
|
pathRewrite: {
|
// 重写路径
|
"^/api": ""
|
}
|
}
|
}
|
},
|
// css的处理
|
css: {
|
// 当为true时，css文件名可省略 module 默认为 false
|
modules: false,
|
// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
|
// 默认生产环境下是 true，开发环境下是 false
|
extract: false,
|
// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
|
sourceMap: false,
|
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
|
loaderOptions: {
|
css: {},
|
less: {}
|
}
|
},
|
// 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
|
configureWebpack: config => {
|
const TerserPlugin = require("terser-webpack-plugin");
|
if (process.env.NODE_ENV === "production") {
|
config.optimization = {
|
minimizer: [
|
new TerserPlugin({
|
terserOptions: {
|
ecma: undefined,
|
warnings: false,
|
parse: {},
|
compress: {
|
drop_console: true,
|
drop_debugger: false,
|
pure_funcs: ["console.log"] // 移除console
|
}
|
}
|
})
|
]
|
};
|
// gzip
|
// 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
|
config.plugins.push(
|
new CompressionWebpackPlugin({
|
algorithm: "gzip",
|
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
|
threshold: 10240,
|
minRatio: 0.8
|
})
|
);
|
// 打包zip
|
config.plugins.push(
|
new FileManagerPlugin({
|
events: {
|
onEnd: {
|
delete: ["./dist/dist.zip"],
|
archive: [{ source: "./dist", destination: "./dist/dist.zip" }]
|
}
|
}
|
})
|
);
|
}
|
},
|
chainWebpack: config => {
|
config.plugins.delete("prefetch");
|
config.resolve.alias
|
.set("@", resolve("src"))
|
.set("@views", resolve("src/views"))
|
.set("@assets", resolve("src/assets"))
|
.set("@components", resolve("src/views/components"));
|
// config.optimization.namedChunks(true);
|
// config.optimization.splitChunks({
|
// cacheGroups: {
|
// vendors: {
|
// name: "chunkstark-vendors",
|
// test: /[\\/]node_modules[\\/]/,
|
// priority: -10,
|
// chunks: "initial"
|
// },
|
// common: {
|
// name: "chunk-common",
|
// minChunks: 2,
|
// maxSize: 100,
|
// priority: -20,
|
// chunks: "initial",
|
// reuseExistingChunk: true
|
// }
|
// }
|
// });
|
}
|
};
|
