最新Vue进阶（十四）：config index，html5前端开发培训机构

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

},
module: {
loaders: [
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 70: …der处理 }̲, { …/,
loader: ‘babel’,
include: projectRoot,
exclude: /node_modules/
},
{
test: /.jsonKaTeX parse error: Expected 'EOF', got '}' at position 41: …json' }̲, { …/,
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]’)
}
}
]
},
vue: { // .vue 文件配置 loader 及工具 (autoprefixer)
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), 调用cssLoaders方法返回各类型的样式对象(css: loader)
postcss: [
require(‘autoprefixer’)({
browsers: [‘last 2 versions’]
})
]
}
}

`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,// 要把

webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: ‘[path].gz[query]’,
algorithm: ‘gzip’,
test: new RegExp(
‘\.(’ +
config.build.productionGzipExtensions.join(‘|’) +
‘)$’
),
threshold: 10240,
minRatio: 0.8
})
)
}

module.exports = webpackConfig

`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’)
})

项目入口，由`package.json` 文件可以看出

“scripts”: {
“dev”: “node build/dev-server.js”,
“build”: “node build/build.js”,
“watch”: “node build/build-watch.js”
},

当执行 `npm run dev / npm run build` / `npm run watch`时运行的是 `node build/dev-server.js` 或 `node build/build.js` 或`node build/build-watch.js`。


`node build/build-watch.js` 是配置加载`production`环境配置基础上在`webpack`配置模块加上 `watch：true` 便可实现代码的实时编译。


### 三、拓展阅读


* 《[Vue进阶（七十）：以vue-cli为例，了解webpack的hash、chunkhash、contenthash](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（五十六）：vue-cli脚手架build目录中的karma.conf.js配置文件](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（五十五）：vue-cli脚手架build目录中的build.js配置文件](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（五十四）：vue-cli脚手架build目录中的dev-server.js配置文件](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（五十三）：vue-cli脚手架build目录中的webpack.prod.conf.js配置文件](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（五十二）：vue-cli脚手架build目录中的webpack.dev.conf.js配置文件](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（五十一）： vue-cli脚手架build目录中的webpack.base.conf.js配置文件](https://bbs.csdn.net/topics/618166371)》



### 最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/e3e1fd9eb082e4cac4acec6d3b1506e5.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/b5a1bfe8eb69a5d4a5d36ca35c5bc4fd.webp?x-oss-process=image/format,png)



71)》



### 最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-RXgwYYZV-1715254328829)]

[外链图片转存中...(img-CjDQB36Y-1715254328829)]