webpa
image.png
“? Project description (A Vue.js project)” 是项⽬的描述，⾃⼰可以修改或者使⽤默认的，我们⼀般使⽤默认的直接按回车键进⾏下⼀步，
image.png
这⾥是作者的信息，我们使⽤默认的，直接下⼀步，
image.png
这⾥有两个选项：Runtime + Compiler 和Runtime-only ，Runtime-only要⽐Runtime + Compiler 轻⼤约6KB,⽽且效率要⾼， 按上下键可以进⾏选择，默认是第⼀个，选择好后按回车键进⾏下⼀步，
image.png
这⼀步是询问是否使⽤vue-router（路由），因为在项⽬中我们会⽤到所以这⾥按Y 键，进⾏下⼀步，
image.png
这⼀步是询问是否使⽤ESLint（语法检查器），ES (ecscript) 即 javascript ,lint 限制的意思，也就是 javascript语法限制器，使得你的语法更加规范，如果你的语法不规范编辑器就会报错，你可能在开发过程中因为⼀个空格导致语法不规范进⽽报错（其实你的代码没有问题的），所以对
于初学者不建议使⽤此语法，所以我们选择 n，并进⾏下⼀步操作，
这⼀步是询问是否使⽤单元测试，这个⽤的⼈⽐较少，所以我们不适⽤，输⼊n并进⾏⼀下步，
这⼀步询问是否要进⾏e2e(端到端测试)，是⼀个⾃动化测试的框架，这⾥我们就不使⽤了，直接输⼊n，进⾏下⼀步:
这⾥询问我们管理项⽬是⽤npm 还是yarn ，这⾥我们使⽤npm ，直接回车，接下来就是等待安装node_modules。下图表⽰安装完成：
执⾏ cd vue-cli2-project 进⼊到我们的项⽬⽬录下，然后执⾏ npm run dev 命令进⾏启动我们的项⽬，下图是我们的项⽬⽬录：
[图⽚上传失败...(image-8ccfe-1599016807425)]
五、 项⽬⽬录介绍：
1、build ⽂件夹：webpack的⼀些相关配置；
2、config ⽂件夹：项⽬开发环境和⽣产环境的⼀些相关配置；
3、node_modules ⽂件夹 ：这⾥存放的是安装包，⽐如webpack、第三⽅插件库、项⽬的依赖⽂件；
4、src ⽂件夹：我们将要写的代码放在这⾥⾯，打包上线时会进⾏编译、压缩等操作。
5、static ⽂件夹：这⾥存放的是⼀些静态⽂件⽐如图⽚、css⽂件、不需要进⾏压缩的js⽂件，打包时这个⽂件夹将原封不动的放到dist（打包时⾃动⽣产的⽂件夹）⽂件夹下⾯。
6、.babelrc ⽂件：ES6语法编译配置，主要是将ES 转成ES 需要适配那些浏览器
7、.editorconfig ⽂件：定义代码格式，对代码的风格进⾏⼀个统⼀。
8、.gitignore ⽂件：git上传需要忽略的⽂件格式
9、 .postcssrc.js ⽂件：postcss配置⽂件
10、 index.html ⽂件：要进⾏访问的⾸页⾯
11、package-lock.json ⽂件：锁定依赖模块和⼦模块的版本号
12、package.json ⽂件：项⽬基本信息，包依赖信息等
13、README.md ⽂件：项⽬说明⽂件
⽂件详解：
1、package.json ⽂件：当我们在命令⾏时 npm run dev 的时候程序执⾏的是package.json⽂件的“script”脚本⾥的“dev”命令；
[图⽚上传失败...(image-a1a0d6-1599016807425)]
2.、build/f.js ⽂件：
'u strict'
const utils = require('./utils') //引⼊的⼯具包
const webpack = require('webpack') //引⼊webpack包
const config = require('../config') //引⼊ config下的index.js⽂件
const merge = require('webpack-merge') //合并配置⽂件
const path = require('path') //node的path模块，对路径进⾏处理
const baWebpackConfig = require('./f') //将⽣产和开发环境下共⽤的配置⽂件进⾏了抽离形成了改⽂件
const CopyWebpackPlugin = require('copy-webpack-plugin') //拷贝插件
const HtmlWebpackPlugin = require('html-webpack-plugin') //加载html模块
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') //友好的错误提⽰插件
const portfinder = require('portfinder') //在当前机器上找⼀个可打开的端⼝号，默认是8080，如果端⼝号被占⽤则重新寻找可打开的端⼝号。
const HOST = v.HOST
const PORT = v.PORT && v.PORT)
const devWebpackConfig = merge(baWebpackConfig, { //利⽤merge插件将 baWebpackConfig 配置与当前配置进⾏合并
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, uPostCSS: true }) //引⼊utils中⼀些css-loader和postcss-loader
},
devtool: config.dev.devtool, //控制是否⽣成以及如何⽣成源码映射，这⾥引⼊的是config下的index.js的 “devtool: 'cheap-module-eval-source-map'”,
// the devServer options should be customized in /config/index.js
// dev-rver的配置
devServer: {
clientLogLevel: 'warning', //当使⽤inline mode，devTools的命令⾏中将会显⽰⼀些调试信息
historyApiFallback: { //当使⽤ HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.astsPublicPath, 'index.html') },
3、build/f.js ⽂件
'u strict'
const path = require('path') //node的path模块，对路径进⾏处理
const utils = require('./utils') //引⼊的⼯具包
const config = require('../config')//引⼊ config下的index.js⽂件
const vueLoaderConfig = require('./f') //根据NODE_ENV这个变量分析是否是⽣产环境，然后根据不同的环境来加载，判断是否开启了sourceMap的功能function resolve (dir) {
return path.join(__dirname, '..', dir) //对路径进⾏处理，获取到绝对路径
}
context: solve(__dirname, '../'), //对路径进⾏处理，跳到当前项⽬的根⽬录下
entry: { //⼊⼝⽂件，即项⽬要引⼊哪个js⽂件
app: './src/main.js' //因为 context 中已经跳到了当前项⽬的根⽬录下，所以这⾥的路径是以 ./src 开头
},
output: { //输出⽂件，即项⽬要输出到哪⾥去
path: config.build.astsRoot, //输出到根⽬录下的dist问价夹⾥，具体地址可以在config下的index.js中进⾏修改
filename: '[name].js', //以⽂件的原始名输出
publicPath: v.NODE_ENV === 'production' //根据v.NODE_ENV 来判断是⽣产模式还是开发模式，将最终打包的项⽬要放到服务器的什么地⽅，默认是 config.build.astsPublicPath
: config.dev.astsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'], //简化⼀些⽂件名，引⼊⽂件时可以不带后缀名
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), //简化⽂件的引⼊问题，如：本⽂件中要引⼊ src下的common⾥的demo.js，你就可以这样引⼊：@/common/demo.js
}
},
module: {
rules: [
// 配置各种loader，来处理对应的⽂件
{
test: /\.vue$/, //使⽤vue-loader处理以.vue结束的⽂件
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/, //使⽤babel-loader处理以.js结束的⽂件，即js⽂件
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-rver/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, //使⽤url-loader处理各种格式的图⽚资源，最⼤限制10000KB，这⾥不处理src同级⽬录下的static⾥的图⽚。
loader: 'url-loader',
options: {
limit: 10000,
name: utils.astsPath('img/[name].[hash:7].[ext]') //将处理后的放在img⽂件下，并且加上7位hash值。
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //使⽤url-loader处理视频⽂件。
loader: 'url-loader',
options: {
limit: 10000,
name: utils.astsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, //使⽤url-loader处理字体⽂件。
loader: 'url-loader',
options: {
limit: 10000,
name: utils.astsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
