此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件

  1. 此配置文件是vue开发环境的wepack相关配置文件
  2. 关于注释
    • 当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看
  3. 上代码
// 引入当前目录中的utils工具配置文件

// 请自行查看我博客中的utils.js的相关文章

var utils = require('./utils')

// 引入webpack来使用webpack内置插件

var webpack = require('webpack')

// 引入config目录中的index.js配置文件

var config = require('../config')

// 引入webpack-merge插件用来合并webpack配置对象，也就是说可以把webpack配置文件拆分成几个小的模块，然后合并

var merge = require('webpack-merge')

// 引入当前目录下的webpack.base.conf.js配置文件，主要配置的是打包各种文件类型的配置

// 请自行查看我博客的相关文章

var baseWebpackConfig = require('./webpack.base.conf')

// 下面是一个自动生成html的插件，能够把资源自动加载到html文件中

// 详情请看 (1)

var HtmlWebpackPlugin = require('html-webpack-plugin')

// 下面这个插件是用来把webpack的错误和日志收集起来，漂亮的展示给用户

// 详情请看 (2)

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

// add hot-reload related code to entry chunks

// Object.keys(obj) 是取对象的索引，并放在一个数组里面的方法

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

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

    devtool: '#cheap-module-eval-source-map',

    plugins: [

        // DefinePlugin内置webpack插件，专门用来定义全局变量的，下面定义一个全局变量 process.env 并且值是如下

        /*  'process.env': {

                NODE_ENV: '"development"'

            } 这样的形式会被自动转为

            'process.env': '"development"'

            各位骚年看好了，development如果不加双引号就当做变量处理，程序会报错

        */

        new webpack.DefinePlugin({

            'process.env': config.dev.env

        }),

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

        // 下面这个插件HotModuleReplacementPlugin可以说是博大精深没有几个人弄透的，包括我在内，

        // 详情见(3)

        new webpack.HotModuleReplacementPlugin(),

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

        new webpack.NoEmitOnErrorsPlugin(),

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

        // 下面这个插件介绍过了

        new HtmlWebpackPlugin({

            filename: 'index.html',

            template: 'index.html',

            inject: true  -> 设置为true表示把所有的js文件都放在body标签的屁股

        }),

        // 使用FriendlyErrorsPlugin插件，介绍过了，这个插件的其他细节还设置在dev-server-js文件中

        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就是这么强大，几乎囊括了前端所有的东西

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

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

vue-cli脚手架build目录中的webpack.dev.conf.js配置文件的更多相关文章

  1. vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...

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

    // 下面是引入nodejs的路径模块 var path = require('path') // 下面是utils工具配置文件,主要用来处理css类文件的loader var utils = req ...

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

    转载自:http://www.cnblogs.com/ye-hcj/p/7082620.html webpack.base.conf.js配置文件// 引入nodejs路径模块 var path = ...

  4. vue-cli脚手架build目录中的dev-server.js配置文件

    本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 由于这 ...

  5. vue-cli脚手架build目录中的build.js配置文件

    该随笔收藏自: vue-cli脚手架build目录中的build.js配置文件 这个配置文件是命令npm run build 的入口配置文件,主要用于生产环境 由于这是一个系统的配置文件,将涉及很多的 ...

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

    本文系统讲解vue-cli脚手架build目录中的karma.conf.js配置文件 这个配置文件是命令 npm run unit 的入口配置文件,主要用于单元测试 这条命令的内容如下 "c ...

  7. vue-cli脚手架build目录中check-versions.js的配置

    转载自:https://www.cnblogs.com/ye-hcj/p/7074363.html 本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检 ...

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

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

  9. 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 ...

随机推荐

  1. mac下查看占用端口的进程及杀死进程

    mac lsof -i :9000 kill -9 716

  2. <转载>Win x86-64 - Download & execute (Generator)

    #Title: Obfuscated Shellcode Windows x86/x64 Download And Execute [Use PowerShell] - Generator #leng ...

  3. Carrier-Grade Mirantis OpenStack (the Mirantis NFV Initiative), Part 1: Single Root I/O Virtualization (SR-IOV)

    The Mirantis NFV initiative aims to create an NFV ecosystem for OpenStack, with validated  hardware ...

  4. kvm 客户机系统的代码是如何运行的

    一个普通的 Linux 内核有两种执行模式:内核模式(Kenerl)和用户模式 (User).为了支持带有虚拟化功能的 CPU,KVM 向 Linux 内核增加了第三种模式即客户机模式(Guest), ...

  5. SQL 存在一个表而不在另一个表中的数据

    原文链接:http://blog.csdn.net/windren06/article/details/8188136 (转)A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w ...

  6. selenium与firefox版本不兼容

    报错信息: org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port ...

  7. Swift 3.0 on Ubuntu 15.10

    一.安装swift 3.0 1. 下载 https://swift.org/download/ 找到swift-3.0 ubuntu 15.10版本下载: https://swift.org/buil ...

  8. 终端命令对字符串进行sha1、md5、base64、urlencode/urldecode

    sha1.md5.base64 mac $ echo -n foo|shasum 0beec7b5ea3f0fdbc95d0dd47f3c5bc275da8a33 - $ 2c26b46b68ffc6 ...

  9. poj 1185 状压dp+优化

    http://poj.org/problem?id=1185 炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 291 ...

  10. 继续吐槽XE5中的boost::thread问题：找不到CC32130MT.DLL

    在XE5中,随便创建一个HelloWorld程序,加入boost::thread的功能,编译链接后,无法运行,无法调试,提示找不到CC32130MT.DLL 这个DLL名字看上去好像是跟多线程有关的, ...