diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 64fe3303..65fafb1d 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -1,85 +1,86 @@ -var path = require('path'); -var utils = require('./utils'); -var config = require('../config'); -var vueLoaderConfig = require('./vue-loader.conf'); +var path = require('path') +var utils = require('./utils') +var config = require('../config') +var vueLoaderConfig = require('./vue-loader.conf') function resolve(dir) { - return path.join(__dirname, '..', dir) + return path.join(__dirname, '..', dir) } -var src = path.resolve(__dirname, '../src'); module.exports = { - entry: { - app: './src/main.js' - }, - output: { - path: config.build.assetsRoot, - filename: '[name].js', - publicPath: process.env.NODE_ENV !== 'development' ? config.build.assetsPublicPath: config.dev.assetsPublicPath - }, - resolve: { - extensions: ['.js', '.vue', '.json'], - alias: { - 'vue$': 'vue/dist/vue.esm.js', - '@': resolve('src'), - 'src': path.resolve(__dirname, '../src'), - 'assets': path.resolve(__dirname, '../src/assets'), - 'components': path.resolve(__dirname, '../src/components'), - 'views': path.resolve(__dirname, '../src/views'), - 'styles': path.resolve(__dirname, '../src/styles'), - 'api': path.resolve(__dirname, '../src/api'), - 'utils': path.resolve(__dirname, '../src/utils'), - 'store': path.resolve(__dirname, '../src/store'), - 'router': path.resolve(__dirname, '../src/router'), - 'mock': path.resolve(__dirname, '../src/mock'), - 'vendor': path.resolve(__dirname, '../src/vendor'), - 'static': path.resolve(__dirname, '../static') + entry: { + app: './src/main.js' + }, + output: { + path: config.build.assetsRoot, + filename: '[name].js', + publicPath: process.env.NODE_ENV !== 'development' ? config.build.assetsPublicPath : config.dev.assetsPublicPath + }, + resolve: { + extensions: ['.js', '.vue', '.json'], + alias: { + 'vue$': 'vue/dist/vue.esm.js', + '@': resolve('src'), + 'src': path.resolve(__dirname, '../src'), + 'assets': path.resolve(__dirname, '../src/assets'), + 'components': path.resolve(__dirname, '../src/components'), + 'views': path.resolve(__dirname, '../src/views'), + 'styles': path.resolve(__dirname, '../src/styles'), + 'api': path.resolve(__dirname, '../src/api'), + 'utils': path.resolve(__dirname, '../src/utils'), + 'store': path.resolve(__dirname, '../src/store'), + 'router': path.resolve(__dirname, '../src/router'), + 'mock': path.resolve(__dirname, '../src/mock'), + 'vendor': path.resolve(__dirname, '../src/vendor'), + 'static': path.resolve(__dirname, '../static') + } + }, + externals: { + jquery: 'jQuery' + }, + module: { + rules: [ + // { + // test: /\.(js|vue)$/, + // loader: 'eslint-loader', + // enforce: "pre", + // include: [resolve('src'), resolve('test')], + // options: { + // formatter: require('eslint-friendly-formatter') + // } + // }, + { + test: /\.vue$/, + loader: 'vue-loader', + options: vueLoaderConfig + }, + { + test: /\.js$/, + loader: 'babel-loader?cacheDirectory', + include: [resolve('src'), resolve('test')] + }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]') } - }, - externals: { - jquery: 'jQuery' - }, - module: { - rules: [ - // { - // test: /\.(js|vue)$/, - // loader: 'eslint-loader', - // enforce: "pre", - // include: [resolve('src'), resolve('test')], - // options: { - // formatter: require('eslint-friendly-formatter') - // } - // }, - { test: /\.vue$/, - loader: 'vue-loader', - options: vueLoaderConfig - }, - { - test: /\.js$/, - loader: 'babel-loader?cacheDirectory', - include: [resolve('src'), resolve('test')] - }, - { - test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, - loader: 'url-loader', - query: { - limit: 10000, - name: utils.assetsPath('img/[name].[hash:7].[ext]') - } - }, - { - test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url-loader', - query: { - limit: 10000, - name: utils.assetsPath('fonts/[name].[hash:7].[ext]') - } - } - ] - }, - //注入全局mixin - // sassResources: path.join(__dirname, '../src/styles/mixin.scss'), - // sassLoader: { - // data: path.join(__dirname, '../src/styles/index.scss') - // }, + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 10000, + name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + } + } + ] + }, + //注入全局mixin + // sassResources: path.join(__dirname, '../src/styles/mixin.scss'), + // sassLoader: { + // data: path.join(__dirname, '../src/styles/index.scss') + // }, } + diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 1cc0a90b..c75747ab 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -9,39 +9,42 @@ var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { - baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) + baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) function resolveApp(relativePath) { - return path.resolve(relativePath); + return path.resolve(relativePath); } module.exports = merge(baseWebpackConfig, { - module: { - rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap}) - }, - // cheap-source-map is faster for development - devtool: '#cheap-source-map', - cache: true, - plugins: [ - new webpack.DefinePlugin({ - 'process.env': config.dev.env - }), - new webpack.ProvidePlugin({ - $: 'jquery', - 'jQuery': 'jquery' - }), - // https://github.com/glenjamin/webpack-hot-middleware#installation--usage - new webpack.HotModuleReplacementPlugin(), - new webpack.NoEmitOnErrorsPlugin(), - // https://github.com/ampedandwired/html-webpack-plugin - new HtmlWebpackPlugin({ - filename: 'index.html', - template: 'index.html', - favicon: resolveApp('favicon.ico'), - inject: true, - path:config.dev.staticPath - }), - new FriendlyErrorsPlugin() - ] + module: { + rules: utils.styleLoaders({ + sourceMap: config.dev.cssSourceMap + }) + }, + // cheap-source-map is faster for development + devtool: '#cheap-source-map', + cache: true, + plugins: [ + new webpack.DefinePlugin({ + 'process.env': config.dev.env + }), + new webpack.ProvidePlugin({ + $: 'jquery', + 'jQuery': 'jquery' + }), + // https://github.com/glenjamin/webpack-hot-middleware#installation--usage + new webpack.HotModuleReplacementPlugin(), + new webpack.NoEmitOnErrorsPlugin(), + // https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: 'index.html', + template: 'index.html', + favicon: resolveApp('favicon.ico'), + inject: true, + path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory + }), + new FriendlyErrorsPlugin() + ] }) + diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 6060eadc..a38ea83c 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -12,112 +12,110 @@ var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv function resolveApp(relativePath) { - return path.resolve(relativePath); + return path.resolve(relativePath); } var webpackConfig = merge(baseWebpackConfig, { - module: { - rules: 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') - }, - plugins: [ - // http://vuejs.github.io/vue-loader/en/workflow/production.html - new webpack.DefinePlugin({ - 'process.env': env - }), - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - }, - sourceMap: true - }), - // extract css into its own file - new ExtractTextPlugin({ - filename: utils.assetsPath('css/[name].[contenthash].css') - }), - // Compress extracted CSS. We are using this plugin so that possible - // duplicated CSS from different components can be deduped. - new OptimizeCSSPlugin(), - // 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 - new HtmlWebpackPlugin({ - filename: process.env.NODE_ENV === 'testing' - ? 'index.html' - : config.build.index, - template: 'index.html', - inject: true, - favicon: resolveApp('favicon.ico'), - minify: { - removeComments: true, - collapseWhitespace: true, - removeRedundantAttributes: true, - useShortDoctype: true, - removeEmptyAttributes: true, - removeStyleLinkTypeAttributes: true, - keepClosingSlash: true, - minifyJS: true, - minifyCSS: true, - minifyURLs: true - }, - path:config.build.staticPath, - // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' - }), - // cache Module Identifiers - new webpack.HashedModuleIdsPlugin(), - // 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 - ) - } - }), - // split echarts into its own file - new webpack.optimize.CommonsChunkPlugin({ - async:'echarts', - minChunks(module) { - var context = module.context; - return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 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'] - }), - // copy custom static assets - new CopyWebpackPlugin([ - { - from: path.resolve(__dirname, '../static'), - to: config.build.assetsSubDirectory, - ignore: ['.*'] - } - ]), - new webpack.ProvidePlugin({ - $: 'jquery', - 'jQuery': 'jquery' - }) - ] + module: { + rules: 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'), + publicPath: config.build.assetsPublicPath + }, + plugins: [ + // http://vuejs.github.io/vue-loader/en/workflow/production.html + new webpack.DefinePlugin({ + 'process.env': env + }), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + }, + sourceMap: true + }), + // extract css into its own file + new ExtractTextPlugin({ + filename: utils.assetsPath('css/[name].[contenthash].css') + }), + // Compress extracted CSS. We are using this plugin so that possible + // duplicated CSS from different components can be deduped. + new OptimizeCSSPlugin(), + // 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 + new HtmlWebpackPlugin({ + filename: 'index.html', + template: 'index.html', + inject: true, + favicon: resolveApp('favicon.ico'), + minify: { + removeComments: true, + collapseWhitespace: true, + removeRedundantAttributes: true, + useShortDoctype: true, + removeEmptyAttributes: true, + removeStyleLinkTypeAttributes: true, + keepClosingSlash: true, + minifyJS: true, + minifyCSS: true, + minifyURLs: true + }, + path: config.build.assetsPublicPath + config.build.assetsSubDirectory, + // necessary to consistently work with multiple chunks via CommonsChunkPlugin + chunksSortMode: 'dependency' + }), + // cache Module Identifiers + new webpack.HashedModuleIdsPlugin(), + // 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 + ) + } + }), + // split echarts into its own file + new webpack.optimize.CommonsChunkPlugin({ + async: 'echarts', + minChunks(module) { + var context = module.context; + return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 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'] + }), + // copy custom static assets + new CopyWebpackPlugin([{ + from: path.resolve(__dirname, '../static'), + to: config.build.assetsSubDirectory, + ignore: ['.*'] + }]), + new webpack.ProvidePlugin({ + $: 'jquery', + 'jQuery': 'jquery' + }) + ] }) if (config.build.bundleAnalyzerReport) { - var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin - webpackConfig.plugins.push(new BundleAnalyzerPlugin()) + var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin + webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig + diff --git a/config/index.js b/config/index.js index 7d3cb6c6..581d53a3 100644 --- a/config/index.js +++ b/config/index.js @@ -9,7 +9,6 @@ module.exports = { assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //请根据自己路径配置更改 - staticPath:'./static/', //请根据自己路径配置更改 productionSourceMap: false, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. @@ -29,7 +28,6 @@ module.exports = { autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', - staticPath:'/static/', proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README diff --git a/index.html b/index.html index 67f2ed3e..508351e8 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,8 @@