Vue进阶(五十二):vue-cli脚手架build目录中的webpack.dev.conf.js配置文件

举报
SHQ5785 发表于 2020/12/30 00:38:14 2020/12/30
【摘要】 此配置文件是vue开发环境的wepack相关配置文件。 // 引入当前目录中的utils工具配置文件 var utils = require('./utils') // 引入webpack来使用webpack内置插件 var webpack = require('webpack') // 引入config目录中的index.js配置文件 var config = re...

此配置文件是vue开发环境的wepack相关配置文件。

// 引入当前目录中的utils工具配置文件
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文件中
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 下面这个插件是用来把webpack的错误和日志收集起来,漂亮的展示给用户
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 // devtool是开发工具选项,用来指定如何生成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 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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

(1)html-webpack-plugin

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文件 })
]

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

下面是模板文件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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

(2)friendly-errors-webpack-plugin插件

friendly-errors-webpack-plugin插件把webpack编译出来的错误展示给我们,方便调试。
安装 npm install friendly-errors-webpack-plugin --save-dev
基本使用

   plugins: [ new FriendlyErrorsWebpackPlugin(), ]

  
 
  • 1
  • 2

注意点,使用这个插件时要遵守以下几点:

  • 需要关闭所有的错误日志记录,将webpack配置静默选项设置为true

在使用webpack-dev-middleware插件,关于这个插件的解释在我的dev-sever-js配置文件中有解释,设置以下内容

app.use(require('webpack-dev-middleware')(compiler, { quiet: true, // 必须设置 publicPath: config.output.publicPath,
}));

  
 
  • 1
  • 2
  • 3
  • 4

使用webpack-dev-server时设置如下

   { devServer: { quiet: true } }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

使用webpack-hot-middleware中间件,关于这个插件的解释也在我的dev-server-js文章中

app.use(require('webpack-hot-middleware')(compiler, { log: () => {}
}));

  
 
  • 1
  • 2
  • 3

做到以上几点,就可以正常使用这个插件了,这个插件还有一些配置项,感兴趣自行了解.

(3) HotModuleReplacementPlugin

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就是这么强大,几乎囊括了前端所有的东西。
    这个插件的作用就是当你的程序在运行时,而你现在要替换、添加或删除某个模块,又不想重新加载页面, 这个插件帮助你实现无刷新加载,关于内部实现原理,其实有点意思,各位请自行查看。

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/90039736

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。