```
* 开发环境的配置
* */
//这个插件可以自动生成html,获取在已存在的html插入css、js等
var HtmlWebpackPlugin = require('html-webpack-plugin')
//自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')
// webpack-merge插件提供合并功能,将多个对象合并创建一个新对象。
// 引入friendly-errors-webpack-plugin插件
// 更好的识别webpack错误并提供更好的开发体验
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
var merge = require('webpack-merge')
//引入webpack模块
var webpack = require('webpack');
// 引入path模块
var path = require('path');
//引入小工具
var utils = require('../config/utils');
//引入基本配置
var baseWebpackConfig = require('./webpack.config');
//引入常用配置
var config = require('../config/index')
var env = require('../config/dev.env');
module.exports = merge(baseWebpackConfig,{
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
devtool:config.build.productionSourceMap ? '#source-map' : false,
plugins:[
// 引入DefinePlugin插件
// 该插件允许创建能在编译时间内的全局常量
// 将用户环境变量设置为dev,关闭vue.js所有警告功能
new webpack.DefinePlugin({
//配置全局环境为生产环境
'process.setting':env
}),
//自动打开浏览器
new OpenBrowserPlugin({url: `http://localhost:${config.dev.port}/`, browser: 'chrome'}),
//该插件可以使页面有更新时重绘变更的模块,不会重加载整个页面
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// 将所有webpack bundles集成到一个html页面
new HtmlWebpackPlugin({
// 输出的HTML文件名
filename: './index.html',
// 模板文件路径
template: path.resolve(__dirname, '../index.html'),
// 设置为true或body将js代码加到<body>元素结束前
// 设置为head将js代码加到<head>里面
// 设置为false所有静态资源css和JavaScript都不会注入到模板文件中
inject: true
}),
// 添加FriendlyErrorsPlugin插件。
new FriendlyErrorsPlugin()
]
})
//动态的向入口注入webpack-hot-middleware/client
var devClient = './build/dev-client';
Object.keys(baseWebpackConfig.entry).forEach(function (name,i) {
var extras = [devClient];
baseWebpackConfig.entry[name] = extras.concat(baseWebpackConfig.entry[name]);
})
```
webpack配置解读1(webpack.dev.conf)
猜你喜欢
转载自blog.csdn.net/qq_28473733/article/details/79069281
今日推荐
周排行