webpack配置解读1（webpack.dev.conf）

```

* 开发环境的配置
* */

//这个插件可以自动生成html，获取在已存在的html插入css、js等
var HtmlWebpackPlugin = require('html-webpack-plugin')
//自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')
// webpack-merge插件提供合并功能，将多个对象合并创建一个新对象。
// 引入friendly-errors-webpack-plugin插件
// 更好的识别webpack错误并提供更好的开发体验
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
var merge = require('webpack-merge')
//引入webpack模块
var webpack = require('webpack');
// 引入path模块
var path = require('path');
//引入小工具
var utils = require('../config/utils');

//引入基本配置
var baseWebpackConfig = require('./webpack.config');
//引入常用配置
var config = require('../config/index')

var env = require('../config/dev.env');


module.exports = merge(baseWebpackConfig,{
    module: {
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
   devtool:config.build.productionSourceMap ? '#source-map' : false,
   plugins:[
        // 引入DefinePlugin插件
        // 该插件允许创建能在编译时间内的全局常量
        // 将用户环境变量设置为dev，关闭vue.js所有警告功能
        new webpack.DefinePlugin({
          //配置全局环境为生产环境
          'process.setting':env
        }),

        //自动打开浏览器
        new OpenBrowserPlugin({url: `http://localhost:${config.dev.port}/`, browser: 'chrome'}),

        //该插件可以使页面有更新时重绘变更的模块，不会重加载整个页面
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),

        // 将所有webpack bundles集成到一个html页面
        new HtmlWebpackPlugin({
            // 输出的HTML文件名
            filename: './index.html',
            // 模板文件路径
            template: path.resolve(__dirname, '../index.html'),
            // 设置为true或body将js代码加到<body>元素结束前
            // 设置为head将js代码加到<head>里面
            // 设置为false所有静态资源css和JavaScript都不会注入到模板文件中
            inject: true
        }),

      // 添加FriendlyErrorsPlugin插件。
      new FriendlyErrorsPlugin()
    ]
})


//动态的向入口注入webpack-hot-middleware/client
var devClient = './build/dev-client';
Object.keys(baseWebpackConfig.entry).forEach(function (name,i) {
    var extras = [devClient];
    baseWebpackConfig.entry[name] = extras.concat(baseWebpackConfig.entry[name]);
})
```
webpack配置解读1（webpack.dev.conf）

猜你喜欢
