引言:当我们需要和后台分离部署的时候,必须配置config/index.js:
用 vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置),解析如下:
在node中,有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。
(1)项目中配置的config/index.js,有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
// dev环境
dev: {
// Paths
// 编译输出的二级目录
assetsSubDirectory: 'static',
// 编译发布的根目录,可配置为服务资源域名或CDN域名
assetsPublicPath: '/',
// 定义开发服务器的代理规则(可跨域)
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // 运行测试页面端口
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// 是否开启cssSourceMap
cssSourceMap: true
},
// production环境
build: {
// Template for index.html
// 必须是本地文件系统上的绝对路径,对应路径下回程车 index.html
// 编译输入的 index.html 文件
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
// 必须是本地文件系统上的绝对路径
// 应该指向包含应用程序的所有静态资产的根目录。public/对应Rails/Laravel
// 编译输出的静态资源路径
assetsRoot: path.resolve(__dirname, '../dist'),
/*
被webpack编译处理过的资产文件都会在这个build.assetsRoot目录下,所以它不可以混有
其它可能在build.assetsRoot里面有的文件。
例如:假如build.assetsRoot参数是/path/to/dist,build.assetsSubDirectory 参数是 static,
那么所以webpack资源会被编译到path/to/dist/static目录。
注意:每次编译这个目录会被清空,所以这个只能放编译出来的资源文件。
static/目录的文件会直接被在构建过程中,直接拷贝到这个目录。这意味着是如果你改变这个规则,
所有你依赖于static/中文件的绝对地址,都需要改变。
*/
//编译输出的二级目录
assetsSubDirectory: 'static',
/*
资源的根目录
这个是通过http服务器运行的url路径。在大多数情况下,这个是根目录(/)。如果你的后台框架对
静态资源url前缀要求,你仅需要改变这个参数。在内部,这个是被webpack当做output.publicPath来处理的。
后台有要求的话一般要加上./ 或者根据具体目录添加,不然引用不到静态资源
*/
// 编译发布的根目录,可配置为资源服务器域名会CDN域名
assetsPublicPath: '/',
// 在构建生产环境版本时,是否开启sourcemap
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
// 是否开启gzip
productionGzip: false,
// 需要使用gzip压缩的文件扩展名
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
(2)vue中的build/webpack.base.conf.js
'use strict'
// 引入依赖模块
const path = require('path')
const utils = require('./utils')
const config = require('../config') //获取配置
const vueLoaderConfig = require('./vue-loader.conf')
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
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 环境下开启 cssSourceMap ,在 config/index.js 中可配置 */
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 环境下开启 cssSourceMap ,在 config/index.js 中可配置 */
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最终是否使用 cssSourceMap */
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: { // 配置webpack编译入口
app: './src/main.js'
},
output: { // 配置webpack输出路径和命名规则
path: config.build.assetsRoot, //webpack输出的目标文件夹路径
//webpack 输出bundle文件命名格式,基于文件的MD5生产Hash名称的script来防止缓存
filename: '[name].js',
// webpack编译输出的发布路径(判断是正式环境或开发环境等)
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
// 自动解析确定的扩展名,使得导入模块时可不加扩展名
extensions: ['.js', '.vue', '.json'],
// 创建import或require的别名,一些常用的或路径长的都可以使用别名
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': path.resolve(__dirname, '../src/components'),
}
},
module: {
rules: [
{
test: /\.vue$/, //vue文件后缀
loader: 'vue-loader', //使用vue-loader处理
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
(3)webpack.prod.conf.js 生产环境下的配置文件
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')// 一个可以合并数组和对象的插件
var baseWebpackConfig = require('./webpack.base.conf')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件
// 可以抽取出css,js文件将其与webpack输出的bundle分离
var ExtractTextPlugin = require('extract-text-webpack-plugin') //如果我们想用webpack打包成一个文件,css js分离开,需要这个插件
var HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插件
var env = config.build.env
// 合并基础的webpack配置
var webpackConfig = merge(baseWebpackConfig, {
// 配置样式文件的处理规则,使用styleLoaders
module: {
loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
},
devtool: config.build.productionSourceMap ? '#source-map' : false, // 开启source-map,生产环境下推荐使用cheap-source-map或source-map,后者得到的.map文件体积比较大,但是能够完全还原以前的js代码
output: {
path: config.build.assetsRoot,// 编译输出目录
filename: utils.assetsPath('js/[name].[chunkhash].js'), // 编译输出文件名格式
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') // 没有指定输出名的文件输出的文件名格式
},
vue: { // vue里的css也要单独提取出来
loaders: utils.cssLoaders({ // css加载器,调用了utils文件中的cssLoaders方法,用来返回针对各类型的样式文件的处理方式,
sourceMap: config.build.productionSourceMap,
extract: true
})
},
// 重新配置插件项
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
// 位于开发环境下
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({// 丑化压缩代码
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), // 抽离css文件
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
// filename 生成网页的HTML名字,可以使用/来控制文件文件的目录结构,最
// 终生成的路径是基于webpac配置的output.path的
new HtmlWebpackPlugin({
// 生成html文件的名字,路径和生产环境下的不同,要与修改后的publickPath相结合,否则开启服务器后页面空白
filename: config.build.index,
// 源文件,路径相对于本文件所在的位置
template: 'index.html',
inject: true,
})
]
}
(4)vue 中build/build.js页面
// https://github.com/shelljs/shelljs
require('./check-versions')() // 检查 Node 和 npm 版本
require('shelljs/global') // 使用了 shelljs 插件,可以让我们在 node 环境的 js 中使用 shell
env.NODE_ENV = 'production'
var path = require('path')
var config = require('../config') // 加载 config.js
var ora = require('ora') // 一个很好看的 loading 插件
var webpack = require('webpack') // 加载 webpack
var webpackConfig = require('./webpack.prod.conf') // 加载 webpack.prod.conf
console.log( // 输出提示信息 ~ 提示用户请在 http 服务下查看本页面,否则为空白页
' Tip:\n' +
' Built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
)
var spinner = ora('building for production...') // 使用 ora 打印出 loading + log
spinner.start() // 开始 loading 动画
/* 拼接编译输出文件路径 */
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath) /* 删除这个文件夹 (递归删除) */
mkdir('-p', assetsPath) /* 创建此文件夹 */
cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */
webpack(webpackConfig, function (err, stats) { // 开始 webpack 的编译
// 编译成功的回调函数
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
})
(5)目入口,由package.json 文件可以看出
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
当我们执行 npm run dev / npm run start / npm run build 时运行的是 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 或 npm run dev 或node build/build.js