此文章用来解释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. 查找文件【TLCL】

    locate locate 执行快速的路径名数据库搜索,输出每个与指定子字符串相匹配的路径名. locate bin/zip locate 命令的数据库是updatedb命令创建的. find loc ...

  2. C++两种字符串传参构造函数

    第一种: #include"iostream" #include"string" using namespace std; class Motor{ prote ...

  3. java: i18n语言

    <%@ page language="java" contentType="text/html; charset=utf8"%> <%@ pa ...

  4. 2017-02-20 Sql Server2016安装后无法找到Microsoft Sql Server Management Studio管理器

    最近安装的sql sever2016后发现没有Sql server management studio管理工具,无法操作sql server 解决方案,可去官网单独下载 Sql Server Mana ...

  5. .netframe work的操作系统支持版本

    https://msdn.microsoft.com/zh-cn/library/8z6watww.aspx

  6. 浅谈Vue个性化dashBoard 布局

    dashBoard布局在管理系统使用比较多:使用自己喜欢的方式进行自定义布局 使用npm 安装 npm install vue-grid-layout 全局使用 import vueGridLayou ...

  7. JedisPool的配置参数整理

    JedisPool的配置参数大部分是由JedisPoolConfig的对应项来赋值的. maxActive:控制一个pool可分配多少个jedis实例,通过pool.getResource()来获取: ...

  8. 【.Net 】Json和Xml解析

    引言    Json和Xml是现在跨平台传输数据的主流格式,关于它们的解析,网上资料很多,我稍作整理,写成一个小demo,方便日后使用. JSON解析     能进行json解析的类库有很多,例如Ja ...

  9. Java web应用开发技术

    Java web应用程序供用户通过浏览器发送请求,程序通过执行产生web页面,并将页面传递给客户机器上的浏览器,将得到的web页面呈现给用户. 一个完整的Java web应用程序通常由许多组件构成的, ...

  10. 2018.8.11E-mail

    1发送附件 Attached please find the XXX  for your review and comment. Outlook的附件最好不超过10M,文件要用英语命名,视频音频要压缩 ...