转载自：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. hdu 1253:胜利大逃亡（基础广搜BFS）

    胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. THINKPHP5判断当前浏览器请求方式

    作用 代码 是否为 GET 请求 if (Request::instance()->isGet()) 是否为 POST 请求 if (Request::instance()->isPost ...

  3. 第四篇：使用 CUBLAS 库给矩阵运算提速

    前言 编写 CUDA 程序真心不是个简单的事儿,调试也不方便,很费时.那么有没有一些现成的 CUDA 库来调用呢? 答案是有的,如 CUBLAS 就是 CUDA 专门用来解决线性代数运算的库. 本文将 ...

  4. ajax的轮询和长轮询

    概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 概念总是枯燥的,只有代码方能解心头之快 前段代码:index.html: & ...

  5. 基于Consul+Upsync+Nginx实现动态负载均衡

    基于Consul+Upsync+Nginx实现动态负载均衡 1.Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/l ...

  6. js判断对象数组中是否存在某个对象

    1. 如果要判断数组中是否存在某个元素的话很好判断,直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1 var arr=[1,2,3,4] arr.indexOf(3) arr.ind ...

  7. unicode转换中文

    <!doctype html><html lang="en"> <head>  <meta http-equiv="Refres ...

  8. Sonnet-十四行诗

    <Wish> Of our best wishes we could desire increase, That thereby rose's aroma might never die, ...

  9. 170309、MySQL存储引擎MyISAM与InnoDB区别总结整理

    1.MySQL默认存储引擎的变迁 在MySQL 5.1之前的版本中,默认的搜索引擎是MyISAM,从MySQL 5.5之后的版本中,默认的搜索引擎变更为InnoDB. 2.MyISAM与InnoDB存 ...

  10. SpringMVC的解释与搭建Maven私有代理服务器

    SpringMVC静态资源处理 通常会配置SpringMVC拦截所有请求 即将DisptcherServlet的url-pattern设置为 / 此时会导致SpringMVC同时拦截.css   .j ...