介绍vue-cli脚手架config目录下index.js配置文件
1、config/index.js
- var path = require('path')
- module.exports = {
- build: { // production 环境
- env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
- index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
- assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
- assetsSubDirectory: 'static', // 编译输出的二级目录
- assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
- productionSourceMap: false, // 是否开启 cssSourceMap
- // 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
- productionGzip: false, // 是否开启 gzip
- productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
- },
- dev: { // dev 环境
- env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
- port: 8080, // 运行测试页面的端口
- assetsSubDirectory: 'static', // 编译输出的二级目录
- assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
- proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域)
- // CSS Sourcemaps off by default because relative paths are "buggy"
- // with this option, according to the CSS-Loader README
- // (https://github.com/webpack/css-loader#sourcemaps)
- // In our experience, they generally work as expected,
- // just be aware of this issue when enabling this option.
- cssSourceMap: false // 是否开启 cssSourceMap
- }
- }
2、build/build.js页面
- require('./check-versions')()// 检查 Node 和 npm 版本
- process.env.NODE_ENV = 'production'
- const ora = require('ora') // 一个很好看的 loading 插件
- const path = require('path')
- const config = require('../config')//加载config.js
- const webpack = require('webpack')//加载webpack
- const 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')
- })
3、build/webpack.base.conf.js
- var path = require('path')
- var config = require('../config')
- var utils = require('./utils')
- var projectRoot = path.resolve(__dirname, '../')
- 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 */
- module.exports = {
- entry: utils.getEntries('./src/module/**/*.js'),// 配置webpack编译入口
- output: {// 配置webpack输出路径和命名规则
- path: config.build.assetsRoot,// webpack输出的目标文件夹路径(例如:/dist)
- publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
- filename: '[name].js'// webpack输出bundle文件命名格式,基于文件的md5生成Hash名称的script来防止缓存
- },
- resolve: {
- extensions: ['', '.js', '.vue'],//自动解析确定的拓展名,使导入模块时不带拓展名
- fallback: [path.join(__dirname, '../node_modules')],
- alias: {// 创建import或require的别名,一些常用的,路径长的都可以用别名
- '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: {
- loaders: [
- {
- test: /\.vue$/, // vue文件后缀
- loader: 'vue' //使用vue-loader处理
- },
- {
- test: /\.js$/,
- loader: 'babel',
- include: projectRoot,
- exclude: /node_modules/
- },
- {
- test: /\.json$/,
- loader: 'json'
- },
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url',
- query: {
- limit: 500000,
- 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']
- })
- ]
- }
- }
4、build/webpack.prod.conf.js
- 'use strict'
- const path = require('path')
- const utils = require('./utils')
- const webpack = require('webpack')
- const config = require('../config')
- const merge = require('webpack-merge')// 一个可以合并数组和对象的插件
- const baseWebpackConfig = require('./webpack.base.conf')
- // 用于从webpack生成的bundle中提取文本到特定文件中的插件
- // 可以抽取出css,js文件将其与webpack输出的bundle分离
- const HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插件
- const ExtractTextPlugin = require('extract-text-webpack-plugin')//如果我们想用webpack打包成一个文件,css js分离开,需要这个插件
- 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,// 要把<script>标签插入到页面哪个标签里(body|true|head|false)
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeAttributeQuotes: true
- // more options:
- // https://github.com/kangax/html-minifier#options-quick-reference
- },
- // necessary to consistently work with multiple chunks via CommonsChunkPlugin
- chunksSortMode: 'dependency'
- }),*/
- // 如果文件是多入口的文件,可能存在,重复代码,把公共代码提取出来,又不会重复下载公共代码了
- // (多个页面间会共享此文件的缓存)
- // CommonsChunkPlugin的初始化常用参数有解析?
- // name: 这个给公共代码的chunk唯一的标识
- // filename,如何命名打包后生产的js文件,也是可以用上[name]、[hash]、[chunkhash]
- // minChunks,公共代码的判断标准:某个js模块被多少个chunk加载了才算是公共代码
- // split vendor js into its own file
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- minChunks: function (module, count) {
- // any required modules inside node_modules are extracted to vendor
- return (
- module.resource &&
- /\.js$/.test(module.resource) &&
- module.resource.indexOf(
- path.join(__dirname, '../node_modules')
- ) === 0
- )
- }
- }),
- // extract webpack runtime and module manifest to its own file in order to
- // prevent vendor hash from being updated whenever app bundle is updated
- /* new webpack.optimize.CommonsChunkPlugin({ // 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
- name: 'manifest',
- chunks: ['vendor']
- })*/
- ]
- })
- // gzip模式下需要引入compression插件进行压缩
- if (config.build.productionGzip) {
- var CompressionWebpackPlugin = require('compression-webpack-plugin')
- webpackConfig.plugins.push(
- new CompressionWebpackPlugin({
- asset: '[path].gz[query]',
- algorithm: 'gzip',
- test: new RegExp(
- '\\.(' +
- config.build.productionGzipExtensions.join('|') +
- ')$'
- ),
- threshold: 10240,
- minRatio: 0.8
- })
- )
- }
- if (config.build.bundleAnalyzerReport) {
- const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
- webpackConfig.plugins.push(new BundleAnalyzerPlugin())
- }
- module.exports = webpackConfig
- var pages = utils.getEntries('./src/module/**/*.html')
- for(var page in pages) {
- // 配置生成的html文件,定义路径等
- var conf = {
- filename: page + '.html',
- template: pages[page], //模板路径
- inject: true,
- // excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
- // 如何更好的理解这块呢?举个例子:比如本demo中包含两个模块(index和about),最好的当然是各个模块引入自己所需的js,
- // 而不是每个页面都引入所有的js,你可以把下面这个excludeChunks去掉,然后npm run build,然后看编译出来的index.html和about.html就知道了
- // filter:将数据过滤,然后返回符合要求的数据,Object.keys是获取JSON对象中的每个key
- excludeChunks: Object.keys(pages).filter(item => {
- return (item != page)
- })
- }
- // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
- module.exports.plugins.push(new HtmlWebpackPlugin(conf))
- }
介绍vue-cli脚手架config目录下index.js配置文件的更多相关文章
- vue-cli脚手架config目录下index.js配置文件详解
此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...
- 此文章介绍vue-cli脚手架config目录下index.js配置文件
此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 上代码 // see http://vuejs- ...
- vue-cli脚手架build目录下utils.js工具配置文件详解
此文章用来解释vue-cli脚手架build目录中的utils.js配置文件 此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader ...
- vue -- config index.js 配置文件详解
此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...
- vue-cli中config目录下的index.js文件详解
vue-cli脚手架工具config目录下的index.js解析 转载自:http://www.cnblogs.com/ye-hcj/p/7077796.html // see http://vuej ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)
gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩 ...
- vue-cli脚手架build目录中check-versions.js的配置
转载自:https://www.cnblogs.com/ye-hcj/p/7074363.html 本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检 ...
- Java读取WEB-INF目录下的properties配置文件
如何在Java代码中读取WEB-INF目录下的properties配置文件,下文给出了一个解决方案. 我们习惯将一些配置信息写在配置文件中,比如将数据库的配置信息URL.User和Password写在 ...
随机推荐
- Codeforces Round #621 (Div. 1 + Div. 2)D dij(思维)
题:https://codeforces.com/contest/1307/problem/D 题意:给定无向图,n为点,m为边.在给个k,为特殊点的数目,题目要求在这些特殊点上连一条边,让新图最短路 ...
- 富文本编辑器Tinymce的示例和配置
Demo链接: https://download.csdn.net/download/silverbutter/10557703 有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空),就需 ...
- [Shoi2013]超级跳马(DP+矩阵乘法)
设f[i][j]表示方案数,显然有一个O(m2n)的暴力DP法,但实际上可以按距离当前位置的奇偶性分成s1[i][j]和s2[i][j],然后这个暴力DP可以优化到O(nm)的暴力.于是有这样的递推式 ...
- 吴裕雄--天生自然 PYTHON3开发学习:CGI编程
<Directory "/var/www/cgi-bin"> AllowOverride None Options +ExecCGI Order allow,deny ...
- Android开发学习3
学习内容: 1.复选框CheckBox 2.ImageView & 使用第三方库加载网络图片 3.列表视图ListView 4.网格视图GridView 5.ScrollView & ...
- 前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目
流式布局思想 """ 页面的尺寸改变动态改变页面布局,或是通过父集标签控制多个子标签,这种布局思想就称之为 - 流式布局思想 1) 将标签宽高设置成 百分比,就可以随屏幕 ...
- sqlite如何避免重复建表(获取已经存在的表)
找到已经存在的所有表,手动判断是否需要建表 SELECT name FROM SQLITE_MASTER WHERE type='table'ORDER BY name" 建表时sqlite ...
- Ansible--初始ansible
一.ansible简介 ansible是一种自动化运维工具.实现批量操作系统配置.批量程序部署.批量命令运行等功能. ansible工作在agentless模式下,并且具有幂等性(幂等性不会重复执行相 ...
- [ZJOI2019]Minimax搜索(线段树+动态DP+树剖)
为什么我怎么看都只会10pts?再看还是只会50~70?只会O(n2(R-L+1))/O(nlogn(R-L+1))……一眼看动态DP可还是不会做…… 根节点的答案是叶子传上来的,所以对于L=R的数据 ...
- zabbix-agent服务无法启动
zabbix-agent服务无法启动解决方案1.先配置yum源2.卸载已经安装的zabbix-agent3.重新安装zabbix-agent4.配置zabbix-agent配置文件: Server=服 ...