此文章用来解释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. 【P1714】切蛋糕（单调队列）

    实在不明白难度等级,难不成前缀和是个很变态的东西? 说白了就是单调队列裸题,都没加什么别的东西,就是一个前缀和的计算,然而这个题也不是要用它优化,而是必须这么做啊. #include<iostr ...

  2. C#遍历指定文件夹中的所有文件

    DirectoryInfo TheFolder=new DirectoryInfo(folderFullName);//遍历文件夹foreach(DirectoryInfo NextFolder in ...

  3. jQuery计时器插件

    /** * 定义一个jQuery计时插件,实现记录计时开始时间.结束时间,总共耗时的功能 * @param $ * * @author Ivan 2862099249@qq.com * @date 2 ...

  4. Spring初学之spring的事务管理xml

    所有的java类都是用的上一篇文章:Spring初学之spring的事务管理 不同的是,这时xml配置事务,所以就要把java类中的那些关于spring的注解都删掉,然后在xml中配置,Applica ...

  5. 考虑 PHP 5.0~5.6 各版本兼容性的 cURL 文件上传

    最近做的一个需求,要通过PHP调用cURL,以multipart/form-data格式上传文件.踩坑若干,够一篇文章了. 重要警告 没事不要读PHP的官方中文文档!版本跟不上坑死你! 不同版本PHP ...

  6. Jenkins自动化部署及代码检查配置应用

    首先jenkins是基于java开发的一种持续集成工具,它的存在和实际应用使得我们在开发过程中节省了很多宝贵时间,既然基于java,所以java环境是必须的. 其次Tomcat是针对Java的一个开源 ...

  7. 关于C++中的pow小记（转）

    昨天在敲一个数位DP的问题,但是用到了这个坑D的问题,找了半天错,还以为又是什么奇怪的算法,结果发现思路一致,然后自己各种YY修改,最后不得不和正确答案比对,但是最后发现标准答案和自己的想法几乎一模一 ...

  8. MySQL for Mac在Mac终端导入导出.sql文件

    https://www.cnblogs.com/code4app/p/6222310.html 1.导入 打开终端输入:(前提是已经配置过MySQL环境变量) mysql -u root -p cre ...

  9. NYOJ-626-intersection set（二分查找）

    题目链接 /* Name:NYOJ-626-intersection set Copyright: Author: Date: 2018/4/12 21:30:10 Description: 二分查找 ...

  10. linux 下安装rar解压

    在liunx下原本是不支持rar文件的,需要安装liunx下的winrar版本,操作如下 wget http://www.rarsoft.com/rar/rarlinux-4.0.1.tar.gz t ...