大佬教程收集整理的这篇文章主要介绍了vue-cli + webpack自动生成项目，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<div class="cnblogs_code">
# 全局安装 vue--- vue-
创建过程参考：https://www.2cto.com/kf/201711/695061.html，单元测试选择的是jest
创建好的项目结构如下：
title="vue-cli + webpack自动生成项目" alt="vue-cli + webpack自动生成项目" src="https://cn.js-code.com/res/2019/01-14/23/4c6525483bc7fa1cb82c0999101cc23d.png" >
下面就重点分析build和config目录下各个配置文件的解析：
config目录下的各项配置都是为了服务webpack的配置，给不同的编译条件提供配置
config/index.js
<span style="color: #0000ff">const
path = require(<span style="color: #800000">'<span style="color: #800000">path<span style="color: #800000">'<span style="color: #000000">) @H_408_0@module.exports =<span style="color: #000000"> {</span><span style="color: #008000">//</span><span style="color: #008000"> Paths</span>
assetsSubDirectory: <span style="color: #800000">'</span><span style="color: #800000">static</span><span style="color: #800000">'</span><span style="color: #000000">,assetsPublicPath: </span><span style="color: #800000">'</span><span style="color: #800000">/</span><span style="color: #800000">'</span><span style="color: #000000">,proxyTable: {},</span><span style="color: #008000">//</span><span style="color: #008000"> Various Dev Server setTings</span>
host: <span style="color: #800000">'</span><span style="color: #800000">localhost</span><span style="color: #800000">'</span>,<span style="color: #008000">//</span><span style="color: #008000"> can be overwritten by process.env.HOST</span>
port: <span style="color: #800080">8080</span>,<span style="color: #008000">//</span><span style="color: #008000"> can be overwritten by process.env.PORT,if port is in use,a free one will be determined</span>
autoOpenBrowser: <span style="color: #0000ff">false</span><span style="color: #000000">,errorOverlay: </span><span style="color: #0000ff">true</span><span style="color: #000000">,notifyOnErrors: </span><span style="color: #0000ff">true</span><span style="color: #000000">,poll: </span><span style="color: #0000ff">false</span><span style="color: #000000">,useEslint: </span><span style="color: #0000ff">true</span><span style="color: #000000">,showEslintErrorsInOverlay: </span><span style="color: #0000ff">false</span><span style="color: #000000">,</span><span style="color: #008000">/*</span><span style="color: #008000">*
* source Maps
</span><span style="color: #008000">*/</span>
<span style="color: #008000">//</span> <span style="color: #008000; text-decoration: underline">https://webpack.js.org/configuration/devtool/</span><span style="color: #008000">#development</span>
devtool: <span style="color: #800000">'</span><span style="color: #800000">cheap-module-eval-source-map</span><span style="color: #800000">'</span><span style="color: #000000">,cacheBusTing: </span><span style="color: #0000ff">true</span><span style="color: #000000">,csssourceMap: </span><span style="color: #0000ff">true</span><span style="color: #000000">},build: {
<span style="color: #008000">//<span style="color: #008000"> 在任何模块文件内部，可以使用dirname变量获取当前模块文件所在目录的完整绝对路径。
index: path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../dist/index.html<span style="color: #800000">'<span style="color: #000000">),<span style="color: #008000">//<span style="color: #008000"> Paths
assetsRoot: path.resolve(__dirname,<span style="color: #800000">'<span style="color: #800000">../dist<span style="color: #800000">'<span style="color: #000000">),assetsSubDirectory: <span style="color: #800000">'<span style="color: #800000">static<span style="color: #800000">'<span style="color: #000000">,<span style="color: #008000">/<span style="color: #008000">
productionsourceMap: </span><span style="color: #0000ff">true</span><span style="color: #000000">,</span><span style="color: #008000">//</span> <span style="color: #008000; text-decoration: underline">https://webpack.js.org/configuration/devtool/</span><span style="color: #008000">#production</span>
devtool: <span style="color: #800000">'</span><span style="color: #800000">#source-map</span><span style="color: #800000">'</span><span style="color: #000000">,productionGzip: </span><span style="color: #0000ff">false</span><span style="color: #000000">,productionGzipExtensions: [</span><span style="color: #800000">'</span><span style="color: #800000">js</span><span style="color: #800000">'</span>,<span style="color: #800000">'</span><span style="color: #800000">css</span><span style="color: #800000">'</span><span style="color: #000000">],</span><span style="color: #008000">//</span><span style="color: #008000"> Run the build command with an extra argument to
</span><span style="color: #008000">//</span><span style="color: #008000"> View the bundle analyzer report after build finishes:
</span><span style="color: #008000">//</span><span style="color: #008000"> `npm run build --report`
</span><span style="color: #008000">//</span><span style="color: #008000"> Set to `true` or `false` to always turn it on or off</span><span style="color: #000000"> bundleAnalyzerReport: process.env.npm_config_report
}
}
详解：http://www.cnblogs.com/whkl-m/p/6627864.html
以上是大佬教程为你收集整理的vue-cli + webpack自动生成项目全部内容，希望文章能够帮你解决vue-cli + webpack自动生成项目所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。