转载自：https://www.cnblogs.com/ye-hcj/p/7087205.html

webpack.dev.conf.js详解

//引入当前目录下的utils.js文件模块
var utils = require('./utils')
//node的path模块

var path = require('path')
//内置模块

var webpack = require('webpack')
//引入config目录下的index.js文件

var config = require('../config')
//进行合并对象，相同项目会进行覆盖

var merge = require('webpack-merge')

var baseWebpackConfig = require('./webpack.base.conf')
// 下面是一个自动生成html的插件，能够把资源自动加载到html文件中
// 详情请看 (1）

var HtmlWebpackPlugin = require('html-webpack-plugin')
// 下面这个插件是用来把webpack的错误和日志收集起来，漂亮的展示给用户
// 详情请看 (2)

var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

//=======================静态编译ssi资源==================================
var SSICompileWebpackPlugin = require('ssi-webpack-plugin')

// add hot-reload related code to entry chunks
// Object.keys(obj) Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，
//数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。

Object.keys(baseWebpackConfig.entry).forEach(function (name) {
// 下面这个结果就是把webpack.base.conf.js中的入口entry改成如下配置 
// app: ['./build/dev-client','./src/main.js']    //即数组多加了一个元素

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

})

// 下面是合并配置对象，将这个配置文件特有的配置添加替换到base配置文件中

module.exports = merge(baseWebpackConfig, {

  module: {
　　// 下面是把utils配置中的处理css类似文件的处理方法拿过来，并且不生成cssMap文件

    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })

  },

  // cheap-module-eval-source-map is faster for development
// devtool是开发工具选项，用来指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性价比最高

  devtool: '#source-map',

  plugins: [
// DefinePlugin内置webpack插件，专门用来定义全局变量的，下面定义一个全局变量 process.env 并且值是如下
 /* 'process.env': { NODE_ENV: '"development"' }
 这样的形式会被自动转为 'process.env': '"development"' 
各位骚年看好了，development如果不加双引号就当做变量处理，程序会报错 */

    new webpack.DefinePlugin({

      'process.env': config.dev.env

    }),

    //提取公共代码块 babel-polyfill只能有一个实例

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      chunks: ['index', 'admin'],

      minChunks: function (module, count) {

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          module.resource.indexOf(

            path.join(__dirname, '../node_modules')

          ) === 0

        )

      }

    }),

    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage

    new webpack.HotModuleReplacementPlugin(),
// 下面这个插件比较简单，就是当webpack编译错误的时候，来中端打包进程，防止错误代码打包到文件中，你还不知道

    new webpack.NoEmitOnErrorsPlugin(),

    // https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

      filename: 'index.html',

      template: 'index.html',

      favicon: './src/assets/images/favicon.ico',

      excludeChunks: ['admin'],

      inject: true

    }),

    new HtmlWebpackPlugin({

      filename: 'admin.html',

      template: 'admin.html',

      favicon: './src/assets/images/favicon.ico',

      excludeChunks: ['index'],

      inject: true

    }),

    new SSICompileWebpackPlugin({

      publicPath:'',

      localBaseDir:'C:/Developer/newWorkspace',

      minify:false

    }),

    new FriendlyErrorsPlugin()

  ]

})

注释

(1)html-webpack-plugin插件是用来生成html文件的，有很灵活的配置项，下面是基本的一些用法

plugins: [

    new HtmlWebpackPlugin(), // Generates default index.html

    new HtmlWebpackPlugin({  // Also generate a test.html

      filename: 'test.html', // 生成的文件的名称

      title: 'Custom template', // 文件的标题

      template: 'my-index.ejs' //可以指定模块html文件

    })

]

下面是模板文件my-index.ejs的内容

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title><%= htmlWebpackPlugin.options.title %></title> //这里使用特殊的表示插入配置项的title

  </head>

  <body>

  </body>

</html>

(2)friendly-errors-webpack-plugin插件，把webpack编译出来的错误展示给我们，方便调试

   安装 npm install friendly-errors-webpack-plugin --save-dev

   基本使用

   plugins: [

       new FriendlyErrorsWebpackPlugin(),

   ]

   注意点，使用这个插件要遵守下点

       您需要关闭所有的错误日志记录，将webpack配置静默选项设置为true

       也就是遵循以下三点即可

       在使用webpack-dev-middleware插件，关于这个插件的解释在我的dev-sever-js配置文件中有解释，设置以下内容

        app.use(require('webpack-dev-middleware')(compiler, {

            quiet: true, // 必须设置

            publicPath: config.output.publicPath,

        }));

       使用webpack-dev-server时设置如下

       {

           devServer: {

               quiet: true

           }

       }

       使用webpack-hot-middleware中间件，关于这个插件的解释也在我的dev-server-js文章中

        app.use(require('webpack-hot-middleware')(compiler, {

            log: () => {}

        }));

    做到以上几点，就可以正常使用这个插件了，这个插件还有一些配置项，感兴趣自行了解

(3) HotModuleReplacementPlugin解释如下

    老哥们知道什么是webpack模块不

    webpack支持如下模块

        CoffeeScript

        TypeScript

        ESNext (Babel)

        Sass

        Less

        Stylus

    这些模块支持如下导入的方式

        ES2015 import 语句

        CommonJS require() 语句

        AMD define 和 require 语句

        css/sass/less 文件中的 @import 语句。

        样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

    看到了把，webpack就是这么强大，几乎囊括了前端所有的东西

    这个插件的作用就是当你的程序在运行时，而你现在要替换、添加或删除某个模块，又不想重新加载页面，

    这个插件帮助你实现无刷新加载，关于内部实现原理，其实有点意思，各位请自行查看

webpack.dev.conf.js详解的更多相关文章

  1. vue-cli脚手架npm相关文件解读（3）webpack.dev.conf.js

    系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...

  2. webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

    vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...

  3. VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  4. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  5. vue模拟后台数据，请求本地数据的配置（旧版本dev-server.js，新版本webpack.dev.conf.js）

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  6. vue-cli脚手架build目录中的webpack.dev.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方 ...

  7. npm ERR! mathine_call@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1

    internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'webpack' at Function.Modu ...

  8. vue -- 脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  9. npm ERR! code ELIFECYCLE webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

    “E:\Program Files\JetBrains\WebStorm 2018.1.4\bin\runnerw.exe” G:\node\nodejs\node.exe G:\node\nodej ...

随机推荐

  1. iOS开发之--TableViewCell重用机制避免重复显示问题

    常规配置如下 当超过tableView显示的范围的时候 后面显示的内容将会和前面重复 // 这样配置的话超过页面显示的内容会重复出现 - (UITableViewCell *)tableView:(U ...

  2. 关于python类型创建、反射（自醒）与反序列化

    一.反序列化漏洞与新式类 在pickle和cPickle以及shelve这三个序列化类中,想要构造反序列化漏洞执行命令或者代码,都需要用到新式类. shelve其实底层就是调用的pickle和cPic ...

  3. 【黑金原创教程】【Modelsim】【第四章】激励文本就是仿真环境

      声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/ ...

  4. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  5. Hibernate的多对多映射关系

    example: 老师(teacher)和学生(Student)就是一个多对多的关系吧?老师可以有多个学生,学生也可以由多个老师,那在Hibernate中多对多是怎样实现的呢?? 在Hibernate ...

  6. iOS 常用框架介绍

    iOS框架介绍      Cocoa Touch   GameKit  实现对游戏中心的支持,让用户能够在线共享他们的游戏相关的信息  iOS设备之间蓝牙数据传输   从iOS7开始过期   局域网游 ...

  7. cmake The C compiler identification is unknown

    本地安装有Visual Studio 2015 ,同时更新了update 3 执行上述报错 本地还安装Visual Studio 2017 使用cmake 没问题 分析: 在CMakeFiles/CM ...

  8. ES6中的let和const

    let和const let 用来声明变量,但是所声明的变量只在let命令所在的代码块内有效 { let a=12 alert(a)//12 } alert(a)//报错 找不到 let不像var那样会 ...

  9. 用Python构建你自己的推荐系统

    用Python构建你自己的推荐系统 现如今,网站用推荐系统为你提供个性化的体验,告诉你买啥,吃啥甚至你应该和谁交朋友.尽管每个人口味不同,但大体都适用这个套路.人们倾向于喜欢那些与自己喜欢的其他东西相 ...

  10. 转:JAVA.NET.SOCKETEXCEPTION: TOO MANY OPEN FILES解决方法

    最近随着网站访问量的提高把web服务器移到linux下了,在移服务器的第二天,tomcat频繁的报 java.net.SocketException: Too many open files错误,错误 ...