const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const path = require('path')
const webpack = require('webpack')
// const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const os = require('os')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
function getNetworkIp() {
let needHost = ' '// 打开的host
try {
// 获得网络接口列表
let network = os.networkInterfaces()
for (let dev in network) {
let iface = network[dev]
for (let i = 0; i < iface.length; i++) {
let alias = iface[i]
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
needHost = alias.address
}
}
}
} catch (e) {
needHost = '127.0.0.1'
}
return needHost
}
function resolve(dir) {
return path.join(__dirname, dir)
}
//需要代理的服务器
let proxyTarget = 'http://xx.xx.xx.xx:xxxx'
let publicPath = process.env.NODE_ENV === 'production' ? '/' : '/'
module.exports = {
publicPath: publicPath,
outputDir: 'dist',
// 放置静态资源的地方 (js/css/img/font/...)
// assetsDir: '',
// 是否在保存的时候使用 `eslint-loader` 进行检查。
// 有效的值：`ture` | `false` | `"error"`
// 当设置为 `"error"` 时，检查出的错误会触发编译失败。
lintOnSave: true,
// 使用带有浏览器内编译器的完整构建版本
// 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
// compiler: false,
// babel-loader 默认会跳过 node_modules 依赖。
// 通过这个选项可以显式转译一个依赖。
transpileDependencies: [
/* string or regex */
],
// 是否为生产环境构建生成 source map？
productionSourceMap: false,
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
chainWebpack: (config) => {
// 移除 prefetch 插件,解决组件懒加载失效的问题
config.plugins.delete('prefetch')
// 添加新的svg-sprite-loader处理svgIcon
config.module
.rule('svgIcon')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.tap((options) => {
options = {
symbolId: 'icon-[name]',
}
return options
})
config.plugin('ignore').use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|en/))
// config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
// 原有的svg图像处理loader添加exclude
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
},
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
// 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
// extract: true,
// 是否开启 CSS source map？
sourceMap: true,
// 为预处理器的 loader 传递自定义选项。比如传递给
// sass-loader 时，使用 `{ sass: { ... } }`。
loaderOptions: {},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false,
},
// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
// PWA 插件的选项。
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
pwa: {},
// 配置 webpack-dev-server 行为。
devServer: {
disableHostCheck: false,
open: false,
// host: getNetworkIp(),
host: getNetworkIp(),
port: 8085,
https: true,
hot: true,
// hotOnly: false,
// eslint-disable-next-line no-dupe-keys
open: true,
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
'/api': {
// target: 'https://10.35.1.63:8001',
target: proxyTarget,
changeOrigin: true,
ws: true,
},
},
before: (app) => { },
},
// eslint-disable-next-line no-dupe-keys
configureWebpack: (config) => {
Object.assign(config, {
// 开发生产共同配置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components'),
},
},
})
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.plugins.push(
// 开启压缩
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
)
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false
if (process.env.npm_lifecycle_event === 'analyze') {
config.plugins.push(new BundleAnalyzerPlugin())
}
} else {
// 为开发环境修改配置...
}
},
// 第三方插件的选项
pluginOptions: {},
}