zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refine build

This commit is contained in:
Pan 2017-08-07 16:11:10 +08:00
parent cdebb5c012
commit 2e9a3a849b
5 changed files with 213 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
build/webpack.base.conf.js
View File

@ -1,85 +1,86 @@
var path = require('path'); var path = require('path')
var utils = require('./utils'); var utils = require('./utils')
var config = require('../config'); var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf'); var vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) { function resolve(dir) {
return path.join(__dirname, '..', dir) return path.join(__dirname, '..', dir)
} }
var src = path.resolve(__dirname, '../src');
module.exports = { module.exports = {
entry: { entry: {
app: './src/main.js' app: './src/main.js'
}, },
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: '[name].js', filename: '[name].js',
publicPath: process.env.NODE_ENV !== 'development' ? config.build.assetsPublicPath: config.dev.assetsPublicPath publicPath: process.env.NODE_ENV !== 'development' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
}, },
resolve: { resolve: {
extensions: ['.js', '.vue', '.json'], extensions: ['.js', '.vue', '.json'],
alias: { alias: {
'vue$': 'vue/dist/vue.esm.js', 'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), '@': resolve('src'),
'src': path.resolve(__dirname, '../src'), 'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'), 'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'), 'components': path.resolve(__dirname, '../src/components'),
'views': path.resolve(__dirname, '../src/views'), 'views': path.resolve(__dirname, '../src/views'),
'styles': path.resolve(__dirname, '../src/styles'), 'styles': path.resolve(__dirname, '../src/styles'),
'api': path.resolve(__dirname, '../src/api'), 'api': path.resolve(__dirname, '../src/api'),
'utils': path.resolve(__dirname, '../src/utils'), 'utils': path.resolve(__dirname, '../src/utils'),
'store': path.resolve(__dirname, '../src/store'), 'store': path.resolve(__dirname, '../src/store'),
'router': path.resolve(__dirname, '../src/router'), 'router': path.resolve(__dirname, '../src/router'),
'mock': path.resolve(__dirname, '../src/mock'), 'mock': path.resolve(__dirname, '../src/mock'),
'vendor': path.resolve(__dirname, '../src/vendor'), 'vendor': path.resolve(__dirname, '../src/vendor'),
'static': path.resolve(__dirname, '../static') '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' test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
}, loader: 'url-loader',
module: { query: {
rules: [ limit: 10000,
// { name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
// test: /\.(js|vue)$/, }
// loader: 'eslint-loader', }
// enforce: "pre", ]
// include: [resolve('src'), resolve('test')], },
// options: { //注入全局mixin
// formatter: require('eslint-friendly-formatter') // sassResources: path.join(__dirname, '../src/styles/mixin.scss'),
// } // sassLoader: {
// }, // data: path.join(__dirname, '../src/styles/index.scss')
{ 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')
// },
} }

61
build/webpack.dev.conf.js
View File

@ -9,39 +9,42 @@ var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks // add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) { 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) { function resolveApp(relativePath) {
return path.resolve(relativePath); return path.resolve(relativePath);
} }
module.exports = merge(baseWebpackConfig, { module.exports = merge(baseWebpackConfig, {
module: { module: {
rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap}) rules: utils.styleLoaders({
}, sourceMap: config.dev.cssSourceMap
// cheap-source-map is faster for development })
devtool: '#cheap-source-map', },
cache: true, // cheap-source-map is faster for development
plugins: [ devtool: '#cheap-source-map',
new webpack.DefinePlugin({ cache: true,
'process.env': config.dev.env plugins: [
}), new webpack.DefinePlugin({
new webpack.ProvidePlugin({ 'process.env': config.dev.env
$: 'jquery', }),
'jQuery': 'jquery' new webpack.ProvidePlugin({
}), $: 'jquery',
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage 'jQuery': 'jquery'
new webpack.HotModuleReplacementPlugin(), }),
new webpack.NoEmitOnErrorsPlugin(), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
// https://github.com/ampedandwired/html-webpack-plugin new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({ new webpack.NoEmitOnErrorsPlugin(),
filename: 'index.html', // https://github.com/ampedandwired/html-webpack-plugin
template: 'index.html', new HtmlWebpackPlugin({
favicon: resolveApp('favicon.ico'), filename: 'index.html',
inject: true, template: 'index.html',
path:config.dev.staticPath favicon: resolveApp('favicon.ico'),
}), inject: true,
new FriendlyErrorsPlugin() path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
] }),
new FriendlyErrorsPlugin()
]
}) })

202
build/webpack.prod.conf.js
View File

@ -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 var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
function resolveApp(relativePath) { function resolveApp(relativePath) {
return path.resolve(relativePath); return path.resolve(relativePath);
} }
var webpackConfig = merge(baseWebpackConfig, { var webpackConfig = merge(baseWebpackConfig, {
module: { module: {
rules: utils.styleLoaders({ rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap, sourceMap: config.build.productionSourceMap,
extract: true extract: true
}) })
}, },
devtool: config.build.productionSourceMap ? '#source-map' : false, devtool: config.build.productionSourceMap ? '#source-map' : false,
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'), filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
}, publicPath: config.build.assetsPublicPath
plugins: [ },
// http://vuejs.github.io/vue-loader/en/workflow/production.html plugins: [
new webpack.DefinePlugin({ // http://vuejs.github.io/vue-loader/en/workflow/production.html
'process.env': env new webpack.DefinePlugin({
}), 'process.env': env
new webpack.optimize.UglifyJsPlugin({ }),
compress: { new webpack.optimize.UglifyJsPlugin({
warnings: false compress: {
}, warnings: false
sourceMap: true },
}), sourceMap: true
// extract css into its own file }),
new ExtractTextPlugin({ // extract css into its own file
filename: utils.assetsPath('css/[name].[contenthash].css') 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. // Compress extracted CSS. We are using this plugin so that possible
new OptimizeCSSPlugin(), // duplicated CSS from different components can be deduped.
// generate dist index.html with correct asset hash for caching. new OptimizeCSSPlugin(),
// you can customize output by editing /index.html // generate dist index.html with correct asset hash for caching.
// see https://github.com/ampedandwired/html-webpack-plugin // you can customize output by editing /index.html
new HtmlWebpackPlugin({ // see https://github.com/ampedandwired/html-webpack-plugin
filename: process.env.NODE_ENV === 'testing' new HtmlWebpackPlugin({
? 'index.html' filename: 'index.html',
: config.build.index, template: 'index.html',
template: 'index.html', inject: true,
inject: true, favicon: resolveApp('favicon.ico'),
favicon: resolveApp('favicon.ico'), minify: {
minify: { removeComments: true,
removeComments: true, collapseWhitespace: true,
collapseWhitespace: true, removeRedundantAttributes: true,
removeRedundantAttributes: true, useShortDoctype: true,
useShortDoctype: true, removeEmptyAttributes: true,
removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true,
removeStyleLinkTypeAttributes: true, keepClosingSlash: true,
keepClosingSlash: true, minifyJS: true,
minifyJS: true, minifyCSS: true,
minifyCSS: true, minifyURLs: true
minifyURLs: true },
}, path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
path:config.build.staticPath, // necessary to consistently work with multiple chunks via CommonsChunkPlugin
// necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency'
chunksSortMode: 'dependency' }),
}), // cache Module Identifiers
// cache Module Identifiers new webpack.HashedModuleIdsPlugin(),
new webpack.HashedModuleIdsPlugin(), // split vendor js into its own file
// split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor',
name: 'vendor', minChunks: function (module, count) {
minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor
// any required modules inside node_modules are extracted to vendor return (
return ( module.resource &&
module.resource && /\.js$/.test(module.resource) &&
/\.js$/.test(module.resource) && module.resource.indexOf(
module.resource.indexOf( path.join(__dirname, '../node_modules')
path.join(__dirname, '../node_modules') ) === 0
) === 0 )
) }
} }),
}), // split echarts into its own file
// split echarts into its own file new webpack.optimize.CommonsChunkPlugin({
new webpack.optimize.CommonsChunkPlugin({ async: 'echarts',
async:'echarts', minChunks(module) {
minChunks(module) { var context = module.context;
var context = module.context; return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0); }
} }),
}), // extract webpack runtime and module manifest to its own file in order to
// extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated
// prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({
new webpack.optimize.CommonsChunkPlugin({ name: 'manifest',
name: 'manifest', chunks: ['vendor']
chunks: ['vendor'] }),
}), // copy custom static assets
// copy custom static assets new CopyWebpackPlugin([{
new CopyWebpackPlugin([ from: path.resolve(__dirname, '../static'),
{ to: config.build.assetsSubDirectory,
from: path.resolve(__dirname, '../static'), ignore: ['.*']
to: config.build.assetsSubDirectory, }]),
ignore: ['.*'] new webpack.ProvidePlugin({
} $: 'jquery',
]), 'jQuery': 'jquery'
new webpack.ProvidePlugin({ })
$: 'jquery', ]
'jQuery': 'jquery'
})
]
}) })
if (config.build.bundleAnalyzerReport) { if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) webpackConfig.plugins.push(new BundleAnalyzerPlugin())
} }
module.exports = webpackConfig module.exports = webpackConfig

2
config/index.js
View File

@ -9,7 +9,6 @@ module.exports = {
assetsRoot: path.resolve(__dirname, '../dist'), assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: './', //请根据自己路径配置更改 assetsPublicPath: './', //请根据自己路径配置更改
staticPath:'./static/', //请根据自己路径配置更改
productionSourceMap: false, productionSourceMap: false,
// Gzip off by default as many popular static hosts such as // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you. // Surge or Netlify already gzip all static assets for you.
@ -29,7 +28,6 @@ module.exports = {
autoOpenBrowser: true, autoOpenBrowser: true,
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/', assetsPublicPath: '/',
staticPath:'/static/',
proxyTable: {}, proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy" // CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README // with this option, according to the CSS-Loader README

4
index.html
View File

@ -8,8 +8,8 @@
<title>Juicy</title> <title>Juicy</title>
</head> </head>
<body> <body>
<script src=<%= htmlWebpackPlugin.options.path %>jquery.min.js></script> <script src=<%= htmlWebpackPlugin.options.path %>/jquery.min.js></script>
<script src=<%= htmlWebpackPlugin.options.path %>tinymce/tinymce.min.js></script> <script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>