// 工具函数集合 var utils = require('./utils') var webpack = require('webpack') // 配置文件 var config = require('../config') // webpack 配置合并插件 var merge = require('webpack-merge') // webpac基本配置 var baseWebpackConfig = require('./webpack.base.conf') // 自动生成 html 并且注入到 .html 文件中的插件 // https://github.com/ampedandwired/html-webpack-plugin var HtmlWebpackPlugin = require('html-webpack-plugin') // webpack错误信息提示插件 // https://github.com/geowarin/friendly-errors-webpack-plugin var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // 将 Hol-reload 热重载的客户端代码添加到 webpack.base.conf 的 对应 entry 中，一起打包 Object.keys(baseWebpackConfig.entry).forEach(function(name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) module.exports = merge(baseWebpackConfig, { module: { // styleLoaders rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // 最新的配置为 cheap-module-eval-source-map，虽然 cheap-module-eval-source-map更快，但它的定位不准确 // 所以，换成 eval-source-map devtool: '#eval-source-map', plugins: [ // definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 // 此处，插入适当的环境 // https://webpack.js.org/plugins/define-plugin/ new webpack.DefinePlugin({ 'process.env': config.dev.env }), // HotModule 插件在页面进行变更的时候只会重绘对应的页面模块，不会重绘整个 html 文件 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // 将 index.html 作为入口，注入 html 代码后生成 index.html文件 // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // webpack错误信息提示插件 new FriendlyErrorsPlugin() ] })
webpack.base.conf.js
在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。可以说，这个文件相当重要。
// node自带的文件路径工具
var path = require('path')
// 工具函数集合
var utils = require('./utils')
// 配置文件
var config = require('../config')
// 工具函数集合
var vueLoaderConfig = require('./vue-loader.conf')
/**
* 获得绝对路径
* @method resolve
* @param {String} dir 相对于本文件的路径
* @return {String} 绝对路径
*/
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
// 编译输出的静态资源根路径
path: config.build.assetsRoot,
// 编译输出的文件名
filename: '[name].js',
// 正式发布环境下编译输出的上线路径的根路径
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
// 自动补全的扩展名
extensions: ['.js', '.vue', '.json'],
// 路径别名
alias: {
// 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [{
// 审查 js 和 vue 文件
// https://github.com/MoOx/eslint-loader
test: /\.(js|vue)$/,
loader: 'eslint-loader',
// 表示预先处理
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
// 处理 vue文件
// https://github.com/vuejs/vue-loader
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
// 编译 js
// https://github.com/babel/babel-loader
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
// 处理图片文件
// https://github.com/webpack-contrib/url-loader
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
// 处理字体文件
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
config/index.js
该文件在很多文件中都用到，是主要的配置文件，包含静态文件的路径、是否开启sourceMap等。其中，分为两个部分dev（开发环境的配置）和build（生产环境的配置）。