1 'use strict'  2   3 // build/util.js  4 const utils = require('./utils')  5 // node_modules里面的webpack  6 const webpack = require('webpack')  7 // config/index.js  8 const config = require('../config')  9 // 对象合并 10 const merge = require('webpack-merge') 11 // 路径 12 const path = require('path') 13  14  15 // 引入webpack.base.conf.js配置 16 const baseWebpackConfig = require('./webpack.base.conf') 17 const CopyWebpackPlugin = require('copy-webpack-plugin') 18 const HtmlWebpackPlugin = require('html-webpack-plugin') 19 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 20 const portfinder = require('portfinder') 21  22 // 配置 23 const HOST = process.env.HOST 24 const PORT = process.env.PORT && Number(process.env.PORT) 25  26 const devWebpackConfig = merge(baseWebpackConfig, { 27   module: { 28     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 29   }, 30   // cheap-module-eval-source-map开发速度更快(只检测修改了的文件进行更新，而不是全部) 31   devtool: config.dev.devtool, 32  33   /** 34    *  这里配置开发服务器 35    */ 36   devServer: { 37     clientLogLevel: 'warning', 38     historyApiFallback: { 39       rewrites: [ 40         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 41       ], 42     }, 43     // 是否开启HMR 44     hot: true, 45     // 内容 46     contentBase: false, // 因为我们使用CopyWebpackPlugin 47     // 是否压缩 48     compress: true, 49  50     host: HOST || config.dev.host, 51     port: PORT || config.dev.port, 52  53     // config => config/index.js 54     open: config.dev.autoOpenBrowser, 55  56     overlay: config.dev.errorOverlay 57       ? { warnings: false, errors: true } 58       : false, 59     publicPath: config.dev.assetsPublicPath, 60     proxy: config.dev.proxyTable, 61     // 如果不开启，则不提示友好的错误信息！ 62     quiet: true, // FriendlyErrorsPlugin所必需的 63     watchOptions: { 64       poll: config.dev.poll, 65     } 66   }, 67  68   /** 69    * 配置插件 70    */ 71   plugins: [ 72     new webpack.DefinePlugin({ 73       'process.env': require('../config/dev.env') 74     }), 75     new webpack.HotModuleReplacementPlugin(), 76     new webpack.NamedModulesPlugin(), // HMR在更新时在控制台中显示正确的文件名。 77     new webpack.NoEmitOnErrorsPlugin(), 78     // https://github.com/ampedandwired/html-webpack-plugin 79     new HtmlWebpackPlugin({ 80       filename: 'index.html', 81       template: 'index.html', 82       inject: true 83     }), 84     // 复制到自定义静态源 85     new CopyWebpackPlugin([ 86       { 87         // 来自(可以是对象，可以是String) 88         from: path.resolve(__dirname, '../static'), 89         // 走向(可以是对象，可以是String) 90         to: config.dev.assetsSubDirectory, 91         // 忽略此类文件 92         ignore: ['.*'] 93       } 94     ]) 95   ] 96 }) 97  98 /** 99  * 模块导出(Promise)100  */101 module.exports = new Promise((resolve, reject) => {102   portfinder.basePort = process.env.PORT || config.dev.port103   portfinder.getPort((err, port) => {104 105     if (err) {106       reject(err)107     } else {108       // 发布新的端口，这是e2e测试所必需的109       process.env.PORT = port110       // 添加开发服务器到端口地址111       devWebpackConfig.devServer.port = port112 113       // 添加 FriendlyErrorsPlugin114       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({115         compilationSuccessInfo: {116           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],117         },118         onErrors: config.dev.notifyOnErrors119           ? utils.createNotifierCallback()120           : undefined121       }))122 123       resolve(devWebpackConfig)124     }125   })126 })

 

描述：开发时的配置.(配置开发时的一些操作)

 

例如这里，是否自动打开浏览器（默认true）

 

 

 

'use strict'//js按照严格模式执行const utils = require('./utils')//导入utils.jsconst webpack = require('webpack')//使用webpack来使用webpack内置插件const config = require('../config')//config文件夹下index.js文件const merge = require('webpack-merge')//引入webpack-merge插件用来合并webpack配置对象，也就是说可以把webpack配置文件拆分成几个小的模块，然后合并const path = require('path')const baseWebpackConfig = require('./webpack.base.conf')//导入webpack基本配置const CopyWebpackPlugin = require('copy-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')//生成html文件const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')const portfinder = require('portfinder')//获取portconst HOST = process.env.HOST//process.env属性返回一个对象，包含了当前shell的所有环境变量。这句取其中的host文件？const PORT = process.env.PORT && Number(process.env.PORT)//获取所有环境变量下的端口？//合并模块，第一个参数是webpack基本配置文件webpack.base.conf.js中的配置const devWebpackConfig = merge(baseWebpackConfig, {  module: {    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })//创建模块时匹配请求的规则数组,这里调用了utils中的配置模板styleLoaders  },  // cheap-module-eval-source-map is faster for development  devtool: config.dev.devtool,//debtool是开发工具选项，用来指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性价比最高  // these devServer options should be customized in /config/index.js  devServer: {
   //webpack服务器配置    clientLogLevel: 'warning',//使用内联模式时，在开发工具的控制台将显示消息，可取的值有none error warning info    historyApiFallback: {
   //当使用h5 history api时，任意的404响应都可能需要被替代为index.html，通过historyApiFallback：true控制；通过传入一个对象，比如使用rewrites这个选项进一步控制      rewrites: [        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },      ],    },    hot: true,//是否启用webpack的模块热替换特性。这个功能主要是用于开发过程中，对生产环境无帮助。效果上就是界面无刷新更新。    contentBase: false, // since we use CopyWebpackPlugin.这里禁用了该功能。本来是告诉服务器从哪里提供内容，一半是本地静态资源。    compress: true,//一切服务是否都启用gzip压缩    host: HOST || config.dev.host,//指定一个host,默认是localhost。如果有全局host就用全局，否则就用index.js中的设置。    port: PORT || config.dev.port,//指定端口    open: config.dev.autoOpenBrowser,//是否在浏览器开启本dev server    overlay: config.dev.errorOverlay//当有编译器错误时，是否在浏览器中显示全屏覆盖。      ? { warnings: false, errors: true }      : false,    publicPath: config.dev.assetsPublicPath,//此路径下的打包文件可在浏览器中访问    proxy: config.dev.proxyTable,//如果你有单独的后端开发服务器api,并且希望在同域名下发送api请求，那么代理某些URL会很有用。    quiet: true, // necessary for FriendlyErrorsPlugin  启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。    watchOptions: {
   //webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下，不会正常工作。例如，当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下使用轮询。      poll: config.dev.poll,//是否使用轮询    }  },  plugins: [    new webpack.DefinePlugin({      'process.env': require('../config/dev.env')    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({
   //模块HtmlWebpackPlugin      filename: 'index.html',//生成的文件的名称      template: 'index.html',//可以指定模块html文件      inject: true//在文档上没查到这个选项 不知道干嘛的。。。    }),    // copy custom static assets    new CopyWebpackPlugin([//模块CopyWebpackPlugin  将单个文件或整个文件复制到构建目录      {        from: path.resolve(__dirname, '../static'),//将static文件夹及其子文件复制到        to: config.dev.assetsSubDirectory,        ignore: ['.*']//这个没翻译好，百度翻译看不懂，请自己查文档。。。      }    ])  ]})//webpack将运行由配置文件导出的函数，并且等待promise返回，便于需要异步地加载所需的配置变量。module.exports = new Promise((resolve, reject) => {  portfinder.basePort = process.env.PORT || config.dev.port  portfinder.getPort((err, port) => {    if (err) {      reject(err)    } else {      // publish the new Port, necessary for e2e tests      process.env.PORT = port      // add port to devServer config      devWebpackConfig.devServer.port = port      // Add FriendlyErrorsPlugin      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
   //出错友好处理插件        compilationSuccessInfo: {
   //build成功的话会执行者块          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],        },        onErrors: config.dev.notifyOnErrors//如果出错就执行这块,其实是utils里面配置好的提示信息        ? utils.createNotifierCallback()        : undefined      }))      resolve(devWebpackConfig)    }  })})