此文章用来解释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. 用简单的反射优化代码（动态web项目）

    在动态web项目中,没有使用框架时,只是简单的jsp访问servlet实现增删改查, 无论是哪个方法都需要经过Servlet中的doGet()方法或doPost()方法,我们可以在链接中附带参数进行区 ...

  2. UVA 11525 Permutation （树状数组+YY）

    题意:给你k个数Si,然后给你一个等式   H= ∑  Si ∗ (K − i)!  (i=(1->k)且0 ≤ Si ≤ K − i). 叫你求出第H个全排列 其实这是一个康托展开:X=a[n ...

  3. IntelliJ Idea中配置、使用技巧（持续更新）

    当前项目配置和全局配置 idea中的File-->settings...和File-->other settings-->Default settings...分别是对当前项目的配置 ...

  4. codeforces459D：Pashmak and Parmida's problem

    Description Parmida is a clever girl and she wants to participate in Olympiads this year. Of course ...

  5. Python之单例模式总结

    一.单例模式 a.单例模式分为四种:文件,类,基于__new__方法实现单例模式,基于metaclass方式实现 b.类实现如下: class Sigletion(objects): import t ...

  6. cern-cloud-architecture

    规模: 总体: 有26个Cell 一个数据中心运行控制节点,另外一个仅仅运行nova cell 统一,灵活 nova-api运行在VM中,当然需要至少一个部署在物理机上来启动VM. 每个cell只有一 ...

  7. Hibernate中使用Spring Data JPA

    一.配置文件的方式 1.pom.xml中引入相关依赖 <properties> <project.build.sourceEncoding>UTF-8</project. ...

  8. review13

    Date与Calendar类 Date类和Calendar类属于java.util包. Date类 1.使用无参数构造方法 使用Date类的无参构造方法创建的对象可以获取本机的当前日期和时间,例如: ...

  9. jstl: <c:url> 标签

    这个标签主要是用来重写 URL 地址.它的使用格式如下所示:<c:url value=”value” [context=”context”] [var=”varName”] [scope=”pa ...

  10. 委托+内置委托方法+多播委托+lambda表达式+事件

    委托概念:如果我们要把方法当做参数来传递的话,就要用到委托.简单来说委托是一个类型,这个类型可以赋值一个方法的引用. 声明委托: 在C#中使用一个类分两个阶段,首选定义这个类,告诉编译器这个类由什么字 ...