基于webpack的vue项目介绍_怎么看vue项目中是webpack还是gulp-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37753933/article/details/100127627

使用webpack+vue搭建项目可以很好的开发与生产分离开来,可以在开发时使用一个接口,生产时换一个接口,这些都是webpack提供好的,配置一下就可以了. 打包上线的时候直接npm run build, 代码会经过压缩和混淆,很方便.

安装node.js, 里面集成了 npm, 官网下载,傻瓜式安装. node -v npm -v
安装vue脚手架 npm install -g @vue/cli // 3.x vue -V
安装webpack npm install webpack -g // --全局安装 webpack webpack -v 查看版本

新建项目 vue init webpack my-project

Project name my-project               --项目的名称，直接默认回车
Project description A Vue.js project  --项目描述，直接默认回车
Author syf                            --作者姓名，输入名字（syf）回车
Install vue-router? Yes               --是否安装路由，输入y回车
Use ESLint to lint your code? No      --是否用ESLint规范代码，输入n回车
Set up unit tests No                  --是否需要单元测试，输入n回车
Setup e2e tests with Nightwatch? No   --是否需要单元测试，输入n回车

这样新建出来的项目就是webpack+vue的项目了, 需要Element-UI,less,less-loader之类的可以npm下载.

项目目录

# 最外层文件
1. babelrc：作为项目babel的配置文件（Babel 是一个 JavaScript 编译器，作为我们项目对js的编译），可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能，还可以在这里配置一些框架的按需加载（如element-ui） 
2. .editorconfig：项目中编辑代码风格 
3. .gitignore : 用于git的忽略文件配置（我们使用git提交的时候，有些文件是不需要提交的，如node模块的node_modules文件夹、打包成功的dist文件夹等） 
4. .postcssrc.js: 用于对style的less语法支持配置 
5. index.html: 项目的首页，即我们编写的代码会通过这个文件显示给浏览器 
6. package.json package-lock.json: 这个就不用多说了吧，大家都懂是项目包的依赖文件 
7. README.md: 展现在GitHub上的描述文件

# build文件夹
1. build.js: 作为项目打包的时候（npm run build）的入口文件，通过这个js将整体项目打包 
2. check-versions.js：用于版本node和npm版本的检测 
3. utils.js：用于项目中关于loader器的引用和项目title、icon等设置 
4. vue-loader.conf.js：因为项目是基于vue的，所以，需要一个vue-loader来识别.vue后缀的文件，这个文件，就是vue-loader的配置文件 
5. webpack.base.conf.js：项目webpack的基础配置文件 
6. webpack.dev.conf.js：开发环境下的webpack配置文件 
7. webpack.prod.conf.js：生产环境下的webpack配置文件

`package.json` 和 `package-lock.json` 的区别

package.json 这个文件是 npm init 时创建的一个文件，会记录当前整个项目中的一些基础信息.

package-lock.json 这个文件却是 node_modules 文件夹或者 package.json 文件发生变化时自动生成的。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。

配置打包的入口与出口

webpack 的 4.x 版本中默认约定：
打包的入口文件为 src -> index.js
打包的输出文件为 dist -> main.js

如果要修改打包的入口与出口，可以在 webpack.base.js 中新增如下配置信息：

const path = require('path') // 导入 node.js 中专门操作路径的模块
module.exports = {
  entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
  output: {
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundle.js' // 输出文件的名称
  }
}