const path = require('path'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { // 基本路径 /* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */ /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */ publicPath: process.env.NODE_ENV === 'production' ? './' : './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: false, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only // compiler: false, runtimeCompiler: true, //关键点在这 // 调整内部的 webpack 配置。 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md // //修改或新增html-webpack-plugin的值,在index.html里面能读取htmlWebpackPlugin.options.title // chainWebpack: config =>{ // config.plugin('html') // .tap(args => { // console.log('htmlhtml', args) // args[0].title = "平台"; // return args; // }) // }, configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.mode = 'production'; // 将每个依赖包打包成单独的js文件 var optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, // 依赖包超过20000bit将被单独打包 cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { // get the name. E.g. node_modules/packageName/not/this/part.js // or node_modules/packageName const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; // npm package names are URL-safe, but some servers don't like @ symbols return `npm.${packageName.replace('@', '')}`; } } } }, minimizer: [ new UglifyJsPlugin({ uglifyOptions: { // 删除注释 output: { comments: false }, // 删除console debugger 删除警告 compress: { warnings: false, drop_console: true, //console drop_debugger: false, pure_funcs: [ 'console.log' ] //移除console } } }) ] }; Object.assign(config, { optimization }); } else { // 为开发环境修改配置... config.mode = 'development'; var optimization2 = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, // 依赖包超过20000bit将被单独打包 cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { // get the name. E.g. node_modules/packageName/not/this/part.js // or node_modules/packageName const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; // npm package names are URL-safe, but some servers don't like @ symbols return `npm.${packageName.replace('@', '')}`; } } } } }; } Object.assign(config, { // 开发生产共同配置 // externals: { // 'vue': 'Vue', // 'element-ui': 'ELEMENT', // 'vue-router': 'VueRouter', // 'vuex': 'Vuex' // } // 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(用于csdn引入) resolve: { extensions: [ '.js', '.vue', '.json', '.ts' ], //文件优先解析后缀名顺序 alias: { '@': path.resolve('./src') }, // 别名配置 plugins: [] }, optimization: optimization2 }); }, // vue-loader 配置项 // https://vue-loader.vuejs.org/en/options.html // vueLoader: {}, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin // extract: true, //注释css热更新生效 // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: { less: { // less 全局变量 lessOptions: { globalVars: { hack: `true; @import '~@/assets/styles/variables.less';` }, javascriptEnabled: true } } } // 启用 CSS modules for all css / pre-processor files. // modules: false, }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, // 是否启用dll // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode // dll: false, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相关配置 devServer: { /* 自动打开浏览器 */ open: true, // host: "192.168.0.137", host: '0.0.0.0', //局域网和本地访问 //host: "192.168.1.137", hot: true, port: 8888, https: false, hotOnly: false, before: () => {} }, // 第三方插件配置 pluginOptions: {} };