vue中npmrunbuild打包编译的⼀系列操作
从package.json 中可以看出，npm run build，其实是执⾏了 node build/build.js，我们在build⽂件夹中找到build.js，build主要的⼯作是：检测node和npm版本，删除dist包，webpack构建打包，在终端输出构建信息并结束，如果报错，则输出报错信息。
'u strict'
require('./check-versions')()
const ora = require('ora')// 在终端显⽰的旋转器插件
const rm = require('rimraf')// ⽤于删除⽂件夹
const path = require('path')
const chalk = require('chalk')// 终端⽂字颜⾊插件
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./f')
const spinner = ora('building ')
spinner.start()
// 删除dist⽂件夹，之后webpack打包
rm(path.join(config.build.astsRoot, config.build.astsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.String({
colors: true,
modules: fal,
children: fal, // If you are using ts-loader, tting this to true will make TypeScript errors show up during build.
chunks: fal,
chunkModules: fal
}) + '\n\n')
if (stats.hasErrors()) {
if (stats.hasErrors()) {
console.d(' Build failed with errors.\n'))
}
console.an(' Build complete.\n'))
console.llow(
' Tip: built files are meant to be rved over an HTTP rver.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
build.js⽤到了f.js，他与f.js merge之后，作为webpack配置⽂件，我们再看看f.js，主要做的⼯作是：
1.提取webpack⽣成的bundle中的⽂本，到特定的⽂件，使得css，js⽂件与webpack输出的bundle分离。
2.合并基本的webpack配置
3.配置webpack的输出，包括输出路径，⽂件名格式。
4.配置webpack插件，包括丑化代码。
'u strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baWebpackConfig = require('./f')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// ⽤于从webpack⽣成的bundle中提取⽂本到特定⽂件中的插件
// 可以抽取出css，js⽂件将其与webpack输出的bundle分离
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-asts-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = v.NODE_ENV === 'testing'
require('../v')
: require('../v')
// 合并基础的webpack配置
const webpackConfig = merge(baWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
uPostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : fal, // 配置webpack输出的⽬录，及⽂件命名规则
output: {
path: config.build.astsRoot,
filename: utils.astsPath("js/[name].[chunkhash].js"), chunkFilename: utils.astsPath("js/[id].[chunkhash].js")
},
plugins: [
// webpack插件配置
// vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
"v": env
}),
// 丑化代码
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: fal
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// // 抽离css⽂件到单独的⽂件
new ExtractTextPlugin({
filename: utils.astsPath("css/[name].[contenthash].css"),
// Setting the following option to `fal` will not extract CSS from codesplit chunks.
/
/ Their CSS will instead be inrted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently t to `true` becau we are eing that sourcemaps are included in the codesplit bundle as well when it's `fal`, // increasing file size: /vuejs-templates/webpack/issues/1110
allChunks: true
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
{ safe: true, map: { inline: fal } }
:
{ safe: true }
}),
// generate dist index.html with correct ast hash for caching.
// you can customize output by editing /index.html
// e /ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
// ⽣成并注⼊index.html
filename:
template: "index.html",
inject: true,
minify: {
removeComments: true,
collapWhitespace: true,
removeAttributeQuotes: true
removeAttributeQuotes: true
// more options:
// /kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: "dependency"
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks(module) {
// any required modules inside node_modules are extracted to vendor
return (
/\.js$/.source) &&
);
}
}),
// 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",
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
/
/ in a parate chunk, similar to the vendor chunk
// e: /plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin({
