const webpack = require('webpack') const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css'] // const isProduction = process.env.NODE_ENV === 'production' // 预渲染 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 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, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: config => { config.entry = ['babel-polyfill', './src/main.js'] if (process.env.NODE_ENV === 'production') { config.plugins.push( new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, './dist'), indexPath: path.join(__dirname, './dist', 'index.html'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。 routes: ['/home', '/fittingRoom', '/save', '/share', '/giftBox', '/giftBoxFive'], // renderer: new PrerenderSPAPlugin.PuppeteerRenderer({//这样写renderAfterTime生效了 // renderAfterTime: 5000 // }), // renderAfterDocumentEvent: 'render-event' // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ) }; plugins: [ // 配置compression-webpack-plugin压缩 new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 1024, minRatio: 0.8 }), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 5, minChunkSize: 100 }) ] }, // vue-loader 配置项 // https://vue-loader.vuejs.org/en/options.html // vueLoader: {}, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: { postcss: { plugins: [ require('postcss-px2rem-exclude')({ "remUnit": 75, "exclude": /node_modules/i }), // 换算的基数 ] } }, // 启用 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: { hot:true,//自动保存 overlay: { // 让浏览器 overlay 同时显示警告和错误 warnings: true, errors: true }, // host: "localhost", host: "0.0.0.0", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: false, //配置后自动启动浏览器 hotOnly: true, // 热更新 // proxy: { // '/api': { // target: 'http://ttr.yergoo.com',//服务器协议、ip和端口号 // secure: false, // 如果是https接口,需要配置这个参数 // ws: false,//是否代理websockets // changeOrigin: true, // pathRewrite:{ // '^/api':'' // } // }, // }, }, // 第三方插件配置 pluginOptions: { // ... } }