最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于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)]