此配置文件是vue开发环境wepack相关配置文件。 html-webpack-plugin插件是用来生成html文件的,有很灵活的配置项,下面是基本的一些用法。 下面是模板文件my-index.ejs的内容 friendly-errors-webpack-plugin插件将webpack编译出来的错误展示给我们,方便调试。 安装 基本使用 使用这个插件时要遵守以下几点: 需要关闭所有的错误日志记录,将webpack静默选项设置为true. 在使用webpack-dev-middleware插件,关于这个插件的解释在dev-sever-js配置文件中有解释,设置以下内容 使用webpack-dev-server时设置如下: 使用webpack-hot-middleware中间件 完成以上配置,就可以正常使用这个插件了。 webpack支持如下模块: 这些模块支持如下导入方式: 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url) 这个插件的作用就是当你的程序在运行时,而你现在要替换、添加或删除某个模块,又不想重新加载页面, 这个插件可实现无刷新加载,关于内部实现原理,各位请自行查看。// 引入当前目录中的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()
]
})
html-webpack-plugin
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文件
})
]
<!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>
friendly-errors-webpack-plugin插件
npm install friendly-errors-webpack-plugin --save-dev
plugins: [
new FriendlyErrorsWebpackPlugin(),
]
app.use(require('webpack-dev-middleware')(compiler, {
quiet: true, // 必须设置
publicPath: config.output.publicPath,
}));
{
devServer: {
quiet: true
}
}
app.use(require('webpack-hot-middleware')(compiler, {
log: () => {}
}));
HotModuleReplacementPlugin