粗略的說明了一下打包的文件和大概的流程.css
執行npm run build開始打包html
調用build.jsvue
而後主要調用webpack.prod.conf(有其餘依賴,例如webpack.base.conf)node
關於發佈,就大概說了一下如何對已經進行發佈的js,css,html進行一個小型服務器的發佈webpack
執行node prod.server.js 啓動服務器git
執行該命令會build出相關文件,就是所謂的打包github
> node build/build.js ⠇ building for production...(node:39190) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions() in the next major version of loader-utils. ⠏ building for production... Starting to optimize CSS... Processing static/css/app.96a4b597fd49bcceebc8ed9975532dad.css... Processed static/css/app.96a4b597fd49bcceebc8ed9975532dad.css, before: 227144, after: 227076, ratio: 99.97% Hash: d8fa2ea68ff7eeb5bdb1 Version: webpack 2.2.1 Time: 10500ms Asset Size Chunks Chunk Names static/js/app.5136d78e51734a561a01.js 29.7 kB 0, 2 [emitted] app static/js/vendor.0565b24a91810aaf3061.js 142 kB 1, 2 [emitted] vendor static/js/manifest.c8353bb1e98b372587d9.js 1.5 kB 2 [emitted] manifest static/css/app.96a4b597fd49bcceebc8ed9975532dad.css 227 kB 0, 2 [emitted] app static/js/app.5136d78e51734a561a01.js.map 212 kB 0, 2 [emitted] app static/css/app.96a4b597fd49bcceebc8ed9975532dad.css.map 55.3 kB 0, 2 [emitted] app static/js/vendor.0565b24a91810aaf3061.js.map 1.03 MB 1, 2 [emitted] vendor static/js/manifest.c8353bb1e98b372587d9.js.map 14.1 kB 2 [emitted] manifest index.html 616 bytes [emitted] static/css/reset.css 1.1 kB [emitted] Build complete.
會執行build,會產生dist目錄web
dist |-- index.html `-- static |-- css | |-- app.96a4b597fd49bcceebc8ed9975532dad.css | |-- app.96a4b597fd49bcceebc8ed9975532dad.css.map | `-- reset.css `-- js |-- app.5136d78e51734a561a01.js |-- app.5136d78e51734a561a01.js.map |-- manifest.c8353bb1e98b372587d9.js |-- manifest.c8353bb1e98b372587d9.js.map |-- vendor.0565b24a91810aaf3061.js `-- vendor.0565b24a91810aaf3061.js.map
目錄: build/build.js
shell
require('./check-versions')(); process.env.NODE_ENV = 'production'; var ora = require('ora'); var rm = require('rimraf'); //代替物:The UNIX command rm -rf for node. var path = require('path'); var chalk = require('chalk'); var webpack = require('webpack'); //導入webpack var config = require('../config'); //導入config目錄 var webpackConfig = require('./webpack.prod.conf'); //導入生產配置的webpack配置文件 var spinner = ora('building for production...'); spinner.start(); //每次build都刪除一次dist rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err; //調用webpack,導入webpackConfig webpack(webpackConfig, function (err, stats) { spinner.stop(); if (err) throw err; process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n'); console.log(chalk.cyan(' Build complete.\n')); console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )); }); });
目錄: build/webpack.prod.conf.js
express
var path = require('path'); var utils = require('./utils'); var webpack = require('webpack'); var config = require('../config'); var merge = require('webpack-merge'); //webpack合併模塊 var baseWebpackConfig = require('./webpack.base.conf'); //導入基礎webpack配置文件 var CopyWebpackPlugin = require('copy-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); //單獨提取css文件模塊 var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); var env = config.build.env; //將baseWebpackConfig配置合併 var webpackConfig = merge(baseWebpackConfig, { module: { //增長模塊處理規則 rules: utils.styleLoaders({ //對於全部的css的loader都進行初始化配置 sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, //生成source map文件配置 output: { //輸出build生成的js文件 path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'),//生成主入口文件,如app.js chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') //生成非主入口文件,如vender.js }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({ //解析/壓縮/美化全部的js插件 compress: { warnings: false }, sourceMap: true }), // extract css into its own file new ExtractTextPlugin({ //抽離css而且合併到一個文件 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(), //優化css // 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({ //生成html文件 filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ //抽離js中公共的部分併合併到一個文件裏 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({ //每次打包可是公共js部分沒變的狀況下不觸發更新這個公共js文件 name: 'manifest', chunks: ['vendor'] }), // copy custom static assets new CopyWebpackPlugin([//將打包後的文件複製到指定目錄 { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] }); if (config.build.productionGzip) { //是否打開壓縮,這是對整個打包出來的文件夾進行壓縮 var CompressionWebpackPlugin = require('compression-webpack-plugin'); webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ); } if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; webpackConfig.plugins.push(new BundleAnalyzerPlugin()); } module.exports = webpackConfig;
目錄 ./prod.server.js
var express = require('express'); //導入express var config = require('./config/index'); //導入index.js(裏面有不少配置) var port = process.env.PORT || config.build.port; //初始化端口,端口在index.js配置 var app = express(); //實例化express var router = express.Router(); //初始化路由 router.get('/',function (req,res,next) { req.url = '/index.html'; //這裏訪問的是發佈dist/index.html next(); }); app.use(router); var appData = require('./data.json'); //讀取模擬的數據文件 var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings; var apiRoutes = express.Router(); apiRoutes.get('/seller', function (req, res) { res.json({ errno: 0, data: seller }); }); apiRoutes.get('/goods', function (req, res) { res.json({ errno: 0, data: goods }); }); apiRoutes.get('/ratings', function (req, res) { res.json({ errno: 0, data: ratings }); }); app.use('/api', apiRoutes); app.use(express.static('./dist')); //使用./dist做爲web目錄,因此可以找到.dist/index.html module.exports = app.listen(port, function (err) { //啓動監聽 if (err) { console.log(err); return } console.log('Listening at http://localhost:' + port + '\n') });