var utils = require('./utils')// 工具类
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')// 使用webpack配置合并插件
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')// 这个插件自动生成HTML，并注入到.html文件中
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 生成处理不同的样式文件处理规则 exports.styleLoaders = function (options) { var output = [] var loaders = exports.cssLoaders(options) for (var extension in loaders) { var loader = loaders[extension] output.push({ test: new RegExp(’\.’ + extension + ‘$’), use: loader }) } return output }
———————————————— 华丽的分隔符 —————————————————
下面我们继续说npm run build，打包编译的一系列操作~
从package.json 中可以看出，npm run build，其实是执行了 node build/build.js，我们在build文件夹中找到build.js，build主要的工作是：检测node和npm版本，删除dist包，webpack构建打包，在终端输出构建信息并结束，如果报错，则输出报错信息。
require('./check-versions')()
process.env.NODE_ENV = ‘production’
// 在终端显示的旋转器插件 var ora = require(‘ora’) // 用于删除文件夹 var rm = require(‘rimraf’) var path = require(‘path’) // 终端文字颜色插件 var chalk = require(‘chalk’) var webpack = require(‘webpack’) var config = require(’…/config’) var webpackConfig = require(’./webpack.prod.conf’)
var spinner = ora(‘building for production…’) spinner.start()
/* eslint-disable */
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin') // 用于从webpack生成的bundle中提取文本到特定文件中的插件 // 可以抽取出css，js文件将其与webpack输出的bundle分离
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env // 合并基础的webpack配置 var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, // 7中sourceMap上面有讲过 devtool: config.build.productionSourceMap ? ‘#source-map’ : false, // 配置webpack输出的目录，及文件命名规则 output: { path: config.build.assetsRoot, filename: utils.assetsPath(‘js/[name].min.js’), chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’) }, // webpack插件配置 plugins: [ // 同webpack.dev.conf.js new webpack.DefinePlugin({ ‘process.env’: env }), // 丑化代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), // 抽离css文件到单独的文件 new ExtractTextPlugin({ filename: utils.assetsPath(‘css/[name].min.css’) }), new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // 生成并注入index.html new HtmlWebpackPlugin({ filename: config.build.index, template: ‘index.html’, inject: true, minify: { removeComments: true, collapseWhitespace: false, removeAttributeQuotes: true }, chunksSortMode: ‘dependency’ }), // keep module.id stable when vender modules does not change 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 ) } }), 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: [’.*’] } ]) ] }) // gzip模式下需要引入compression插件进行压缩 if (config.build.productionGzip) { var CompressionWebpackPlugin = require(‘compression-webpack-plugin’)
if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) }
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
