美文网首页
webpack.dev.conf.js文件配置解释

webpack.dev.conf.js文件配置解释

作者: 辣子_ | 来源:发表于2018-08-16 17:24 被阅读0次

    Object.keys(baseWebpackConfig.entry).forEach(function (name) {

      baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])

    })

    有关webpack热加载相关配置,Object.keys() es6语法返回一个数组,包含对象自身所有可枚举属性


    module.exports = megra(baseWebpackConfig,{    //代码块      })    //把webpack.base.conf.js中的配置与代码块中合并,megra()  webpack-megra模块提供


    module: {

        loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })       //独立css文件编译配置

    }  

    devtool: '#eval-source-map'               //调试配置


    new webpack.DefinePlugin({

        'process.env': config.dev.env

    })

    config.dev.env会替换'process.env' 字符串,最终传的是一个对象,{NODE_ENV:"production"}或者{NODE_ENV:"development"}运行在开发环境或生产环境


    new webpack.HotModuleReplacementPlugin()    //webpack优化插件,为经常打包的代码分配最小id,作用不大

    new webpack.HotModuleReplacementPlugin()     //webpack热加载模块

    new webpack.NoErrorsPlugin()      //编译出错,跳过编译错误代码

    new HtmlWebpackPlugin({

        filename: 'index.html',     //编译后文件名

        template: 'index.html',     //源文件名

        inject: true          //js,css文件以链接的形式插入head、body标签

    })

    相关介绍见 webpack 文档

    相关文章

      网友评论

          本文标题:webpack.dev.conf.js文件配置解释

          本文链接:https://www.haomeiwen.com/subject/qcuobftx.html