// 同样的使用了 config/index.js var config = require('../config') // 使用 webpack var webpack = require('webpack') // 使用 webpack 配置合并插件 var merge = require('webpack-merge') // 使用一些小工具 var utils = require('./utils') // 加载 webpack.base.conf var baseWebpackConfig = require('./webpack.base.conf') // 使用 html-webpack-plugin 插件，这个插件可以帮我们自动生成 html 并且注入到 .html 文件中 var HtmlWebpackPlugin = require('html-webpack-plugin') // add hot-reload related code to entry chunks // 将 Hol-reload 相对路径添加到 webpack.base.conf 的 对应 entry 前 Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) // 将我们 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置合并 module.exports = merge(baseWebpackConfig, { module: { // 使用 styleLoaders loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // eval-source-map is faster for development // 使用 #eval-source-map 模式作为开发工具，此配置可参考 DDFE 往期文章详细了解 devtool: '#eval-source-map', plugins: [ // definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 new webpack.DefinePlugin({ 'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.optimize.OccurenceOrderPlugin(), // HotModule 插件在页面进行变更的时候只会重回对应的页面模块，不会重绘整个 html 文件 new webpack.HotModuleReplacementPlugin(), // 使用了 NoErrorsPlugin 后页面中的报错不会阻塞，但是会在编译结束后报错 new webpack.NoErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin // 将 index.html 作为入口，注入 html 代码后生成 index.html文件 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }) ] })
webpack.base.conf.js
我们看到在 webpack.dev.conf.js 中又引入了 webpack.base.conf.js， 它看起来很重要的样子，所以我们只能在下一章来看看 config/index.js 了 （摊手）
// 使用 NodeJS 自带的文件路径插件 var path = require('path') // 引入 config/index.js var config = require('../config') // 引入一些小工具 var utils = require('./utils') // 拼接我们的工作区路径为一个绝对路径 var projectRoot = path.resolve(__dirname, '../') // 将 NodeJS 环境作为我们的编译环境 var env = process.env.NODE_ENV // check env & config/index.js to decide weither to enable CSS Sourcemaps for the // various preprocessor loaders added to vue-loader at the end of this file // 是否在 dev 环境下开启 cssSourceMap ，在 config/index.js 中可配置 var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) // 是否在 production 环境下开启 cssSourceMap ，在 config/index.js 中可配置 var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) // 最终是否使用 cssSourceMap var useCssSourceMap = cssSourceMapDev || cssSourceMapProd module.exports = { entry: { // 编译文件入口 app: './src/main.js' }, output: { // 编译输出的根路径 path: config.build.assetsRoot, // 正式发布环境下编译输出的发布路径 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // 编译输出的文件名 filename: '[name].js' }, resolve: { // 自动补全的扩展名 extensions: ['', '.js', '.vue'], // 不进行自动补全或处理的文件或者文件夹 fallback: [path.join(__dirname, '../node_modules')], alias: { // 默认路径代理，例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找 'vue': 'vue/dist/vue.common.js', 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components') } }, resolveLoader: { fallback: [path.join(__dirname, '../node_modules')] }, module: { preLoaders: [ // 预处理的文件及使用的 loader { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ } ], loaders: [ // 需要处理的文件及使用的 loader { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ }, { test: /\.json$/, loader: 'json' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, eslint: { // eslint 代码检查配置工具 formatter: require('eslint-friendly-formatter') }, vue: { // .vue 文件配置 loader 及工具 (autoprefixer) loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), postcss: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] } }
config/index.js
终于分析完了 webpack.base.conf.js，来让我们看一下 config/index.js
index.js 中有 dev 和 production 两种环境的配置