处理编译问题

shinygang · shinygang · commit d73a21165222 · 2016-12-06T22:25:46.000+08:00
diff --git a/build/build.js b/build/build.js
@@ -1,7 +1,7 @@
 // https://github.com/shelljs/shelljs
 require('./check-versions')()
 require('shelljs/global')
-process.env.NODE_ENV = 'production'
+env.NODE_ENV = 'production'
 
 var path = require('path')
 var config = require('../config')
@@ -21,7 +21,8 @@ spinner.start()
 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
 rm('-rf', assetsPath)
 mkdir('-p', assetsPath)
-cp('-R', 'static/*', assetsPath)
+cp('-R', 'public/*', assetsPath)
+
 
 webpack(webpackConfig, function (err, stats) {
   spinner.stop()
diff --git a/build/dev-server.js b/build/dev-server.js
@@ -1,6 +1,6 @@
 require('./check-versions')()
 var config = require('../config')
-if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
+if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 var path = require('path')
 var express = require('express')
 var webpack = require('webpack')
@@ -38,11 +38,10 @@ compiler.plugin('compilation', function (compilation) {
 Object.keys(proxyTable).forEach(function (context) {
   var options = proxyTable[context]
   if (typeof options === 'string') {
-    options = { target: options }
+    options = { target: options, changeOrigin: true }
   }
   app.use(proxyMiddleware(context, options))
 })
-
 // handle fallback for HTML5 history API
 app.use(require('connect-history-api-fallback')())
 
@@ -54,8 +53,8 @@ app.use(devMiddleware)
 app.use(hotMiddleware)
 
 // serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
+var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory)
+app.use(staticPath, express.static('./public'))
 
 module.exports = app.listen(port, function (err) {
   if (err) {
diff --git a/build/utils.js b/build/utils.js
@@ -3,9 +3,7 @@ var config = require('../config')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
+  var assetsSubDirectory = config.build.assetsSubDirectory
   return path.posix.join(assetsSubDirectory, _path)
 }
 
@@ -36,13 +34,13 @@ exports.cssLoaders = function (options) {
 
   // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
   return {
-    css: generateLoaders(['css?-autoprefixer']),
-    postcss: generateLoaders(['css?-autoprefixer']),
-    less: generateLoaders(['css?-autoprefixer', 'less']),
-    sass: generateLoaders(['css?-autoprefixer', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css?-autoprefixer', 'sass']),
-    stylus: generateLoaders(['css?-autoprefixer', 'stylus']),
-    styl: generateLoaders(['css?-autoprefixer', 'stylus'])
+    css: generateLoaders(['css']),
+    postcss: generateLoaders(['css']),
+    less: generateLoaders(['css', 'less']),
+    sass: generateLoaders(['css', 'sass?indentedSyntax']),
+    scss: generateLoaders(['css', 'sass']),
+    stylus: generateLoaders(['css', 'stylus']),
+    styl: generateLoaders(['css', 'stylus'])
   }
 }
 
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -2,37 +2,39 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-var webpack = require('webpack')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 var env = process.env.NODE_ENV
+// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
+// various preprocessor loaders added to vue-loader at the end of this file
+var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
+var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
+var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
 
 module.exports = {
   entry: {
     app: './src/main.js'
   },
   output: {
     path: config.build.assetsRoot,
-    publicPath: env === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+    publicPath: config.build.assetsPublicPath,
     filename: '[name].js'
   },
   resolve: {
-    // require 时省略的扩展名，如：require('module') 不需要 module.js
-    extensions: ['', '.js', '.vue', '.scss', '.css'],
+    extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
-      vue: path.join(__dirname, '../node_modules/vue/dist/vue'),
+      'vue$': 'vue/dist/vue',
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components'),
-      'filter': path.resolve(__dirname, '../src/filters.js')
+      'components': path.resolve(__dirname, '../src/components')
     }
   },
   resolveLoader: {
     fallback: [path.join(__dirname, '../node_modules')]
   },
   module: {
-    preLoaders: [{
+    preLoaders: [
+      {
         test: /\.vue$/,
         loader: 'eslint',
         include: projectRoot,
@@ -45,7 +47,8 @@ module.exports = {
         exclude: /node_modules/
       }
     ],
-    loaders: [{
+    loaders: [
+      {
         test: /\.vue$/,
         loader: 'vue'
       },
@@ -60,39 +63,32 @@ module.exports = {
         loader: 'json'
       },
       {
-        // 文件加载器，处理文件静态资源
-        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'file-loader?name=./fonts/[hash].[ext]'
-      }, {
-        // edit this for additional asset file types
-        test: /\.(png|jpg|gif)$/,
-        loader: 'file-loader?name=images/[hash].[ext]'
-      }, {
-        test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style', 'css!autoprefixer!sass')
-      }, {
-        test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style', 'css!autoprefixer!sass')
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
       }
     ]
   },
   eslint: {
     formatter: require('eslint-friendly-formatter')
   },
   vue: {
-    loaders: {
-      css: ExtractTextPlugin.extract('css!autoprefixer'),
-      scss: ExtractTextPlugin.extract('css!autoprefixer!sass')
-    }
-  },
-  plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
-      minChunks: 3 // 提取至少3个模块共有的部分
-    }),
-    new ExtractTextPlugin('css/[name].css', {
-      allChunks: true,
-      disable: false
-    })
-  ]
+    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
+    postcss: [
+      require('autoprefixer')({
+        browsers: ['last 2 versions']
+      })
+    ]
+  }
 }
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
@@ -1,4 +1,5 @@
 var config = require('../config')
+var path = require('path')
 var webpack = require('webpack')
 var merge = require('webpack-merge')
 var utils = require('./utils')
@@ -11,20 +12,55 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
 })
 
-baseWebpackConfig.plugins = (baseWebpackConfig.plugins || []).concat([
-  new webpack.DefinePlugin({
-    'process.env': config.dev.env
-  }),
-  // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-  new webpack.optimize.OccurenceOrderPlugin(),
-  new webpack.HotModuleReplacementPlugin(),
-  new webpack.NoErrorsPlugin(),
-  // https://github.com/ampedandwired/html-webpack-plugin
-  new HtmlWebpackPlugin({
-    filename: 'index.html',
-    template: 'index.html',
-    inject: true
-  })
-])
-
-module.exports = baseWebpackConfig
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({
+      extract: true
+    })
+  },
+  vue: {
+    loaders: utils.cssLoaders({
+      extract: true
+    })
+  },
+  // eval-source-map is faster for development
+  devtool: '#eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    new ExtractTextPlugin("[name].[chunkhash].css", {
+        allChunks: true,
+        disable: false
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // 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',
+      chunks: ['vendor']
+    })
+  ]
+})
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -6,19 +6,40 @@ var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
+var env = config.build.env
 
 var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  vue: {
+    loaders: utils.cssLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
-      'process.env': 'production'
+      'process.env': env
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
       }
     }),
     new webpack.optimize.OccurenceOrderPlugin(),
+    // extract css into its own file
+    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css'), {
+        allChunks: true,
+        disable: false
+    }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
@@ -35,6 +56,26 @@ var webpackConfig = merge(baseWebpackConfig, {
       },
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // 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
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
     })
   ]
 })
diff --git a/config/index.js b/config/index.js
@@ -6,27 +6,16 @@ module.exports = {
     env: require('./prod.env'),
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '',
+    assetsSubDirectory: 'public',
+    assetsPublicPath: '/',
     productionSourceMap: true,
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
     productionGzip: false,
     productionGzipExtensions: ['js', 'css']
   },
   dev: {
     env: require('./dev.env'),
     port: 8020,
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '',
-    proxyTable: {},
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
+    proxyTable: {
+    }
   }
 }
