转载自：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. 【python】NLTK好文

    From:http://m.blog.csdn.net/blog/huyoo/12188573 nltk是一个python工具包, 用来处理和自然语言处理相关的东西. 包括分词(tokenize), ...

  2. 用户控件(ASCX)向网页(ASPX)传值使用反射实现

    用户控件向网页传递值,方法非常之多,此博文尝试使用反射来实现.在站点中,建一个网页以及一个用户控件. 网页切换至设计模式,拉用户控件至网页上. Default.aspx: <%@ Page La ...

  3. jQuery实现鼠标悬停显示提示信息窗口的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 编程之美 set 20 构造数独

    1. 朴素 DFS 遍历效率太低, 即便是预先设定 9 个数放到数组再去 DFS, 同样并不高效 2. 在生成一个可行解后, 随机删除一些数字, 删除的数字越多, 数独的难度就越大 3. 正解二. 3 ...

  5. 剑指 offer set 26 不用加减乘除做加法

    总结 1. Leetcode 上有一道题, 是不用乘除做乘法, 那道题算是背包问题的变形 2. 不用加减乘除, 还可以用移位操作 3. 将数字转成二进制格式, 然后运用二进制亦或, 移位运算解决 3. ...

  6. m2014_c：C 工具库1：list

    转自:http://www.cnblogs.com/sniperHW/archive/2012/04/02/2429607.html 近来考虑将项目基础框架的开发语言从C++换成C,免不了要编写一大堆 ...

  7. 说说M451例程之PWM的寄存器讲解

    M451提供了两路PWM发生器.每路PWM支持6通道PWM输出或输入捕捉.有一个12位的预分频器把时钟源分频后输入给16位的计数器,另外还有一个16位的比较器.PWM计数器支持向上,向下,上下计数方式 ...

  8. JSON-Server 安装

    在后台还没给接口之前,使用JSON-Server搭建一台JSON服务器,将接口要返回的数据放在json文件里面.然后请求这些数据,这样我们可以先做一些东西,等后台接口好了之后直接替换就可以了,不必一直 ...

  9. sql中IN的含义

    in后面可以是查询集合,也可以是诸如('1','2','3','4') 例: UPDATE CC_PROBLEM_INFO SET Z_STATUS = 1 WHERE CONTENT_ID IN ( ...

  10. docker-compose 部署 selenium-grid

    目录 一.安装Docker 二.安装Docker-Compose库 三.准备docker-compose.yaml文件 四.运行 上篇:详细介绍selenium-grid 一.安装Docker 必须要 ...