localhost:3000/api/xxx // 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上，方便与服务器对接 var proxyMiddleware = require('http-proxy-middleware') // 根据 Node 环境来引入相应的 webpack 配置 var webpackConfig = process.env.NODE_ENV === 'testing' ? require('./webpack.prod.conf') : require('./webpack.dev.conf') // dev-server 监听的端口，默认为config.dev.port设置的端口，即8080 var port = process.env.PORT || config.dev.port // 用于判断是否要自动打开浏览器的布尔变量，当配置文件中没有设置自动打开浏览器的时候其值为 false var autoOpenBrowser = !!config.dev.autoOpenBrowser // 定义 HTTP 代理表，代理到 API 服务器 var proxyTable = config.dev.proxyTable // 创建1个 express 实例 var app = express() // 根据webpack配置文件创建Compiler对象 var compiler = webpack(webpackConfig) // webpack-dev-middleware使用compiler对象来对相应的文件进行编译和绑定 // 编译绑定后将得到的产物存放在内存中而没有写进磁盘 // 将这个中间件交给express使用之后即可访问这些编译后的产品文件 var devMiddleware = require('webpack-dev-middleware')(compiler,{ publicPath: webpackConfig.output.publicPath,quiet: true }) // webpack-hot-middleware，用于实现热重载功能的中间件 var hotMiddleware = require('webpack-hot-middleware')(compiler,{ log: () => {} }) // 当html-webpack-plugin提交之后通过热重载中间件发布重载动作使得页面重载 compiler.plugin('compilation',function (compilation) { compilation.plugin('html-webpack-plugin-after-emit',function (data,cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) // 将 proxyTable 中的代理请求配置挂在到express服务器上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 格式化options，例如将'www.example.com'变成{ target: 'www.example.com' } if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context,options)) }) // handle fallback for HTML5 history API // 重定向不存在的URL，常用于SPA app.use(require('connect-history-api-fallback')()) // serve webpack bundle output // 使用webpack开发中间件 // 即将webpack编译后输出到内存中的文件资源挂到express服务器上 app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display // 将热重载中间件挂在到express服务器上 app.use(hotMiddleware) // serve pure static assets // 静态资源的路径 var staticPath = path.posix.join(config.dev.assetsPublicPath,config.dev.assetsSubDirectory) // 将静态资源挂到express服务器上 app.use(staticPath,express.static('./static')) // 应用的地址信息，例如：http://localhost:8080 var uri = 'http://localhost:' + port // webpack开发中间件合法（valid）之后输出提示语到控制台，表明服务器已启动 devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '\n') }) // 启动express服务器并监听相应的端口（8080） module.exports = app.listen(port,function (err) { if (err) { console.log(err) return } // when env is testing,don't need open it // 如果符合自动打开浏览器的条件，则通过opn插件调用系统默认浏览器打开对应的地址uri if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })

插件 var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') // 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件 var HtmlWebpackPlugin = require('html-webpack-plugin') // 用于更友好地输出webpack的警告、错误等信息 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) // 合并基础的webpack配置 module.exports = merge(baseWebpackConfig,{ // 配置样式文件的处理规则，使用styleLoaders module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) },// 配置Source Maps。在开发中使用cheap-module-eval-source-map更快 devtool: '#cheap-module-eval-source-map',// 配置webpack插件 plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }),// https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(),// 后页面中的报错不会阻塞，但是会在编译结束后报错 new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html',template: 'index.html',inject: true }),new FriendlyErrorsPlugin() ] })

输出带颜色字体的插件 var chalk = require('chalk') // 执行Unix命令行的插件 var shell = require('shelljs') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf') var spinner = ora('building for production...') spinner.start() // 开启loading动画 // 输出文件的目标文件夹 var assetsPath = path.join(config.build.assetsRoot,config.build.assetsSubDirectory) // 递归删除旧的目标文件夹 shell.rm('-rf',assetsPath) // 重新创建文件夹 shell.mkdir('-p',assetsPath) shell.config.silent = true // 将static文件夹复制到输出的目标文件夹 shell.cp('-R','static/*',assetsPath) shell.config.silent = false // webpack编译 webpack(webpackConfig,function (err,stats) { spinner.stop() // 停止loading动画 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' )) })

生成的bundle中提取文本到特定文件中的插件 // 可以抽取出css，js文件将其与webpack输出的bundle分离 var ExtractTextPlugin = require('extract-text-webpack-plugin') var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env // 合并基础的webpack配置 var webpackConfig = merge(baseWebpackConfig,{ module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap,extract: true }) },devtool: config.build.productionSourceMap ? '#source-map' : false,// 配置webpack的输出 output: { // 编译输出目录 path: config.build.assetsRoot,// 编译输出文件名格式 filename: utils.assetsPath('js/[name].[chunkhash].js'),// 没有指定输出名的文件输出的文件名格式 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') },// 配置webpack插件 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }),// 丑化压缩代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false },sourceMap: true }),// 抽离css文件 new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].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({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,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({ 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'] }) ] }) // gzip模式下需要引入compression插件进行压缩 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

module.exports = {
// 构建产品时使用的配置
build: {
// webpack的编译环境
env: require('./prod.env'),// 编译输入的index.html文件
index: path.resolve(dirname,'../dist/index.html'),// webpack输出的目标文件夹路径
assetsRoot: path.resolve(dirname,'../dist'),// webpack编译输出的二级文件夹
assetsSubDirectory: 'static',// webpack编译输出的发布路径
assetsPublicPath: '/',// 使用SourceMap
productionSourceMap: true,// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to true,make sure to:
// npm install --save-dev compression-webpack-plugin
// 默认不打开开启gzip模式
productionGzip: false,// gzip模式下需要压缩的文件的扩展名
productionGzipExtensions: ['js','css'],// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// npm run build --report
// Set to true or false to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},// 开发过程中使用的配置
dev: {
// webpack的编译环境
env: require('./dev.env'),// dev-server监听的端口
port: 8080,// 启动dev-server之后自动打开浏览器
autoOpenBrowser: true,// 请求代理表，在这里可以配置特定的请求代理到对应的API接口
// 例如将'/api/xxx'代理到'www.example.com/api/xxx'
proxyTable: {},// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option,according to the css-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience,they generally work as expected,// just be aware of this issue when enabling this option.
// 是否开启 cssSourceMap
cssSourceMap: false
}
}