webpack client端打包重复

[wwqhy]

[wwqhy]

//webpack.client.config.js const path = require('path') const webpack = require('webpack') const merge = require('webpack-merge') const base = require('./webpack.base.config') const SWPrecachePlugin = require('sw-precache-webpack-plugin') const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

const config = merge(base, { entry: { app: './src/entry-client.js' }, resolve: { alias: { 'create-api': './create-api-client.js' } }, plugins: [ // strip dev-only code in Vue source new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 'process.env.VUE_ENV': '"client"', 'isServer': false, 'isClent': true }), // extract vendor chunks for better caching // new webpack.optimize.CommonsChunkPlugin({ // name: 'vendor', // minChunks: function (module) { // // a module is extracted into the vendor chunk if... // return ( // // it's inside node_modules // /node_modules/.test(module.context) && // // and not a CSS file (due to extract-text-webpack-plugin limitation) // !/.css$/.test(module.request) // ) // } // }), // extract webpack runtime & manifest to avoid vendor chunk hash changing // on every build. // new webpack.optimize.CommonsChunkPlugin({ // name: 'manifest' // }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks (module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }), new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), new VueSSRClientPlugin() ] })

if (process.env.NODE_ENV === 'production') { const CompressionWebpackPlugin = require('compression-webpack-plugin') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin config.plugins.push( // auto generate service worker new SWPrecachePlugin({ cacheId: 'vue-hn', filename: 'service-worker.js', minify: true, dontCacheBustUrlsMatching: /./, staticFileGlobsIgnorePatterns: [/.map$/, /.json$/], runtimeCaching: [ { urlPattern: '/', handler: 'networkFirst' }, { urlPattern: /\/(top|new|show|ask|jobs)/, handler: 'networkFirst' }, { urlPattern: '/item/:id', handler: 'networkFirst' }, { urlPattern: '/user/:id', handler: 'networkFirst' } ] }), new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\.(' + ['js', 'css'].join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }), new BundleAnalyzerPlugin() ) }

module.exports = config

[wwqhy]

base.config.js const path = require('path') const webpack = require('webpack') const merge = require('webpack-merge') const vueConfig = require('./vue-loader.config') const ExtractTextPlugin = require('extract-text-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader')

const isProd = process.env.NODE_ENV === 'production'

module.exports = { devtool: isProd ? false : '#cheap-module-source-map', output: { path: path.resolve(dirname, '../output'), publicPath: '/output/', filename: '[name].[chunkhash].js' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'public': path.resolve(dirname, '../public'), 'config': path.resolve(dirname, '../config'), '@': path.resolve(dirname, '../src'), 'components': path.resolve(__dirname, '../src/components') } }, module: { noParse: /es6-promise.js$/, // avoid webpack shimming process rules: [ { test: /.vue$/, loader: 'vue-loader', options: merge(vueConfig, { preLoaders: { i18n: 'yaml-loader' }, loaders: { i18n: '@kazupon/vue-i18n-loader' } }) }, { test: /.yml$/, loader: 'json-loader!yaml-loader' }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.css$/, loader: 'css-loader' }, { test: /.(png|jpg|gif|svg)$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]?[hash]' } }, { test: /.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]?[hash]' } }, { test: /.less$/, use: isProd ? ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { minimize: true } }, 'less-loader' ], fallback: 'vue-style-loader' }) : ['vue-style-loader', 'css-loader', 'less-loader'] }, ] }, performance: { maxEntrypointSize: 300000, hints: isProd ? 'warning' : false }, plugins: isProd ? [ new VueLoaderPlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true } }), new webpack.optimize.ModuleConcatenationPlugin(), new ExtractTextPlugin({ filename: 'common.[chunkhash].css' }) ] : [ new VueLoaderPlugin(), new FriendlyErrorsPlugin() ] }