在实际开发中常遇到,代码在
在包中。json文件的脚本中,会提供开发环境与生产环境两个命令。但是实际使用中会遇见测试版与正式版代码相继发布的情况,这样反复更改服务器地址,偶尔忘记更改url会给工作带来很多不必要的麻烦(当然也会对你的工作能力产生质疑)。这样就需要在生产环境中配置测试版本打包命令与正式版本打包命令。
1包。json文件中增加命令行命令,并指定路径。
"脚本":{
“开发”:“节点构建/dev-server.js”,
“构建”:“节点构建/构建。js ",//正式环境打包命令
:“fev节点构建/测试。js "//测试环境打包命令
},
2,在构建文件中添加相应文件
. js
//https://github.com/shelljs/shelljs
要求(“。/check-versions”) ()
process.env。NODE_ENV=' fev '
var ora=要求(“奥拉”)
var路径=要求(“路径”)
var粉笔=要求(“粉笔”)
var shell=要求(“shelljs”)
var webpack=要求(“webpack”)
var配置=要求(. ./配置)
var webpackConfig=要求(“。/webpack.test.conf”)
var转轮=奥拉(建筑fev…)
spinner.start ()
var assetsPath=path.join (config.fev。assetsRoot config.fev.assetsSubDirectory)
壳。rm(“射频”,assetsPath)
壳。mkdir (“p”, assetsPath)
shell.config。沉默=true
壳。cp (- r,静态/*,assetsPath)
shell.config。沉默=false
webpack (webpackConfig函数(呃,统计){
spinner.stop ()
如果(err)把犯错
process.stdout.write (stats.toString ({
颜色:没错,
模块:假的,
孩子们:假的,
块:假的,
chunkModules:假
})+ ' \ n \ n ')
console.log(粉笔。青色(“构建完整。\ n”))
console.log (chalk.yellow (
提示:建立文件是在HTTP服务器。\ n ' +
“开放指数。html文件://获得\ ' t工作。\ n”
）)
})
webpack.test.conf.js
var路径=要求(“路径”)
var跑龙套=要求(“/跑龙套。”)
var webpack=要求(“webpack”)
var配置=要求(. ./配置)
var=需要合并(“webpack-merge”)
var baseWebpackConfig=要求(“。/webpack.base.conf”)
var HtmlWebpackPlugin=要求(“html-webpack-plugin”)
var ExtractTextPlugin=要求(“extract-text-webpack-plugin”)
var env=config.fev.env
var webpackConfig=合并(baseWebpackConfig, {
模块:{
规则:utils.styleLoaders ({
sourceMap: config.fev.productionSourceMap,
提取:真
}）
},
devtool: config.fev。productionSourceMap & # 63;“#源图”:假的,
输出:{
路径:config.fev.assetsRoot,
文件名:utils.assetsPath (js/[名字]。[chunkhash] . js”),
chunkFilename: utils.assetsPath (js/[id]。[chunkhash] . js”)
},
插件:[//http://vuejs.github.io/vue-loader/en/workflow/production.html
新webpack.DefinePlugin ({
的过程。env”: env
}),
新webpack.optimize.UglifyJsPlugin ({
压缩:{
警告:假的,
drop_console:真
},
sourceMap:真
}),//css提取到它自己的文件
新ExtractTextPlugin ({
文件名:utils.assetsPath (css/[名字]。[contenthash] . css”)
}),//生成dist指数。html使用正确的资产散列缓存。//可以定制输出通过编辑/index . html//参见https://github.com/ampedandwired/html-webpack-plugin
新HtmlWebpackPlugin ({
文件名:config.fev.index,
模板:“index . html”,
注射:没错,
使变小:{
removeComments:没错,
collapseWhitespace:没错,
removeAttributeQuotes:真//更多的选择://https://github.com/kangax/html-minifier options-quick-reference
},//通过CommonsChunkPlugin必须始终使用多个块
chunksSortMode:“依赖”
}),//供应商js分割成自己的文件
新webpack.optimize.CommonsChunkPlugin ({
名称:“供应商”,
minChunks:函数(模块、计数){//所需的模块内部node_modules提取到供应商
回报(
模块。资源,,
美元/\ . js/test (module.resource),,
module.resource.indexOf (
路径。加入(__dirname“. ./node_modules”)
)===0
)
}
}),//提取webpack运行时和模块清单为了自己的文件//防止供应商散列更新每当应用程序更新包
新webpack.optimize.CommonsChunkPlugin ({
名称:“清单”,
块(“供应商”):
}）
］
}）
如果(config.fev.productionGzip) {
var CompressionWebpackPlugin=要求(“compression-webpack-plugin”)
webpackConfig.plugins.push (
新CompressionWebpackPlugin ({
资产:“(路径). gz和[查询]”,
算法:gzip,
测试:新的正则表达式(
' \ \。(' +
config.fev.productionGzipExtensions.join (“|”) +
美元”)”
)，
阈值:10240
minRatio: 0.8
}）
)
}
如果(config.fev.bundleAnalyzerReport) {
var BundleAnalyzerPlugin=需要.BundleAnalyzerPlugin (“webpack-bundle-analyzer”)
webpackConfig.plugins。推动(新BundleAnalyzerPlugin ())
}
模块。出口=webpackConfig
