'use strict' const path = require('path') const CompressionWebpackPlugin = require('compression-webpack-plugin') const webpack = require('webpack') function resolve(dir) { return path.join(__dirname, dir) } const name = '登陆系统' // page title const BASE_URL = process.env.NODE_ENV === 'production' ? '' : 'http://192.168.2.235:1111' // const BASE_URL = process.env.NODE_ENV === 'production' ? '' : 'http://192.168.2.79:8031/' const port = 8086 // const port = process.env.port || process.env.npm_config_port || 9528 // dev port module.exports = { /** * 如果计划在子路径下部署站点,则需要设置publicPath */ publicPath: './', outputDir: 'dist', assetsDir: 'static', // lintOnSave: process.env.NODE_ENV === 'development', lintOnSave: false, productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 devServer: { // public:'0.0.0.0:8086', hot: true,//自动保存 port: port, // 端口 open: true, // 自动开启浏览器 compress: false, // 开启压缩 overlay: { warnings: false, errors: false } // proxy: { // // '/': { // // target: 'http://192.168.2.235:1111', // 修改后台接口地址 // // changeOrigin: true, // // pathRewrite: { // // '^/': '' // // } // // } // // '/omsweb': { // 自定义 接口前缀 // // target: 'http://132.232.19.211:9123', // 这里可以跟随项目实际部署服务器来 // // changeOrigin: true, // // pathRewrite: { // // '^/': '' // // } // // } // } // before: require('./mock/mock-server.js') }, css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: { // pass options to sass-loader sass: { // 引入全局变量样式,@使我们设置的别名,执行src目录 data: `@import "@/styles/index.scss";` } }, // 启用 CSS modules for all css / pre-processor files. modules: false }, configureWebpack: { name: name, resolve: { alias: { '@': resolve('src'), 'staticPub': resolve('public') } }, plugins: [// 压缩代码 new CompressionWebpackPlugin( { filename: '[path].gz[query]', algorithm: 'gzip', test: /\.js$|\.html$|\.json$|\.css/, threshold: 0, // 只有大小大于该值的资源会被处理 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 deleteOriginalAssets: false // 删除原文件 } ), new webpack.ProvidePlugin( { $: 'jquery', jQuery: 'jquery', 'windows.jQuery': 'jquery' } ) ] }, chainWebpack(config) { // 删除预加载 config.plugins.delete('preload') config.plugins.delete('prefetch') // 设置 svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() // 设置保留空白 config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { options.compilerOptions.preserveWhitespace = true return options }) .end() config .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map') ) config .when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime`必须与runtimeChunk名称相同。默认值为“runtime”` inline: /runtime\..*\.js$/ }]) .end() // 分割代码 config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // 仅打包最初依赖的第三方 }, elementUI: { name: 'chunk-elementUI', // 将elementUI拆分为一个包 priority: 20, // 重量必须大于libs和app,否则将打包成libs或app test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 为了适应cnpm }, commons: { name: 'chunk-commons', test: resolve('src/components'), // 可以自定义规则 minChunks: 3, // 最小公共数 priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') } ) } }