vuecli3 配置小记

[5Mi]

// const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const runtimeChunkName = 'runtime~manifest'
// 本想仿照实现cli2.0时的bundleAnalyzerReport 后来看英文版的文档发现同样加 --report 即可
// const bundleAnalyzerReport = process.env.npm_config_report
const productionGzip = process.env.npm_config_gzip

const publicPath = 'tm'
module.exports = {
  baseUrl: '/statics/tm',
  outputDir: publicPath,
  devServer: {
    proxy: {
     // someApi host target
    }
  },
  // This is preferred over manually tapping into specific loaders using chainWebpack, because these options need to be applied in multiple locations where the corresponding loader is used.
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/assets/scss/_variables.scss";
        @import "@/assets/scss/_mixin.scss";`
      }
    }
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
      config.optimization
        .runtimeChunk({
          name: runtimeChunkName
        })
        .splitChunks({
          cacheGroups: {
            vendors: {
              name: 'chunk-vendors',
              test: /[\\\/]node_modules[\\\/]/,
              priority: -10,
              chunks: 'initial'
            },
            common: {
              name: 'chunk-common',
              minChunks: 2,
              priority: -20,
              // all
              chunks: 'all',
              reuseExistingChunk: true
              // 30k 以上才会单独生成chunk
              // minSize: 30000
            }
          }
        })

      config
        .plugin('inlineManifest')
        .after('html')
        .use(HtmlWebpackInlineSourcePlugin)
        .end()
        .plugin('html')
        .tap(args => {
          // 自用变量
          args[0].productLog = true
          // Inline all files which names start with “runtime~” and end with “.js”.
          // That’s the default naming of runtime chunks
          /* see https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching Inline webpack runtime to save an extra HTTP request */
          args[0].inlineSource = 'runtime~.+\\.js'
          return args
        })
      if (productionGzip) {
        config
          .plugin('compression')
          .use(CompressionWebpackPlugin)
          .tap(args => {
            const productionGzipExtensions = ['js', 'css']
            args[0] = {
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              test: new RegExp(
                '\\.(' + productionGzipExtensions.join('|') + ')$'
              ),
              threshold: 10240,
              minRatio: 0.8
            }
            return args
          })
      }

      // 移除 runtime~manifest 的preload 但在modern模式下的legacy bundle时 此处的config.plugin('preload')会报错
      // https://github.com/vuejs/vue-cli/blob/53509e115fae1d99b52508a97ed6caa2c4e557e9/packages/%40vue/cli-service/lib/commands/build/index.js#L49
      if (process.env.VUE_CLI_MODERN_BUILD) {
        config.plugin('preload').tap(args => {
          args[0].fileBlacklist.push(/runtime~.+\.js/)
          return args
        })
      }
      // 移除 prefetch 插件
      config.plugins.delete('prefetch')
    } else {
      // mutate for development...
    }
  }
}

[5Mi]

使用docker 在linux中开发或打包示例

windows的话 volume只能挂载在 c:/Users/ 下

# linux:alpine,node,npm
FROM registry.cn-qingdao.aliyuncs.com/wumi/docker_for_node:0.0.1

RUN mkdir /data

COPY ./package.json /data/

WORKDIR /data

RUN npm i --registry=https://registry.npm.taobao.org

EXPOSE 8080

# 运行
# docker build -t vue_docker .
# docker run --rm -v "/$(PWD)":/data -p 8000:8080 -it vue_docker

参考