const path = require('path') const { publicPath, assetsDir, outputDir, lintOnSave, transpileDependencies, title, devPort, providePlugin, donation, webpackBarName, webpackBanner, donationConsole, } = require('./src/config') const { dateFormat } = require('./src/utils/date') if (donation) donationConsole() const { version, author } = require('./package.json') const Webpack = require('webpack') const WebpackBar = require('webpackbar') const CompressionPlugin = require('compression-webpack-plugin') const time = dateFormat(new Date()) process.env.VUE_APP_TITLE = title || '企业信息平台' process.env.VUE_APP_AUTHOR = author || 'Hotent' process.env.VUE_APP_UPDATE_TIME = time process.env.VUE_APP_VERSION = version const resolve = (dir) => path.join(__dirname, dir) const mockServer = () => { if (process.env.NODE_ENV === 'development') return require('./mock') else return '' } module.exports = { publicPath, assetsDir, outputDir, lintOnSave: false, transpileDependencies, devServer: { hot: true, port: devPort, open: true, noInfo: false, overlay: { warnings: true, errors: true, }, after: mockServer(), }, configureWebpack(config) { //解决打包后图标乱码问题 const sassLoader = require.resolve('sass-loader') config.module.rules .filter((rule) => { return rule.test.toString().indexOf('scss') !== -1 }) .forEach((rule) => { rule.oneOf.forEach((oneOfRule) => { const sassLoaderIndex = oneOfRule.use.findIndex( (item) => item.loader === sassLoader ) oneOfRule.use.splice(sassLoaderIndex, 0, { loader: require.resolve('css-unicode-loader'), }) }) }) const resultConfig = { resolve: { alias: { '@': resolve('src'), }, }, plugins: [ new Webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/, }), new Webpack.ProvidePlugin(providePlugin), new WebpackBar({ name: webpackBarName, }), ], } if (process.env.NODE_ENV !== 'development') { resultConfig.plugins.push( new CompressionPlugin({ // 要压缩的文件类型 test: /\.js$|\.html$|\.css/, // 大于该尺寸的文件才压缩(单位byte) threshold: 10240, // 是否删除原文件 deleteOriginalAssets: false, }) ) } return resultConfig }, chainWebpack(config) { config.plugins.delete('preload') config.plugins.delete('prefetch') config.when(process.env.NODE_ENV !== 'development', (config) => { config.performance.set('hints', false) config.devtool('none') config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial', }, elementUI: { name: 'chunk-elementUI', priority: 20, test: /[\\/]node_modules[\\/]_?element-ui(.*)/, }, fortawesome: { name: 'chunk-fortawesome', priority: 20, test: /[\\/]node_modules[\\/]_?@fortawesome(.*)/, }, }, }) config .plugin('banner') .use(Webpack.BannerPlugin, [`${webpackBanner}${time}`]) .end() config.module .rule('images') .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true, }) .end() }) }, runtimeCompiler: true, productionSourceMap: false, css: { requireModuleExtension: true, sourceMap: true, loaderOptions: { scss: { additionalData(content, loaderContext) { const { resourcePath, rootContext } = loaderContext const relativePath = path.relative(rootContext, resourcePath) if ( relativePath.replace(/\\/g, '/') !== 'src/styles/variables.scss' ) { return '@import "~@/styles/variables.scss";' + content } return content }, }, }, }, }