一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）

一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释） 本文将详细介绍如何利用webpack搭建一个vue脚手架，包括项目结构、配置、构建等方面的详细讲解和注释。该文章主要面向对webpack有一定了解但不熟悉的同学，旨在帮助大家更好地理解webpack和vue的结合使用。 一、适用人群 1. 对webpack知识有一定了解但不熟悉的同学。 2. 女同学！！！！ 二、目的 在自己对webpack有进一步了解的同时，也希望能帮到一些刚接触webpack的同学。脚手架已放上github，不想听我啰嗦的同学可以直接去download或clone下来看哦。脚手架里都有详细注释！ 三、脚手架结构 ├── build 构建服务和webpack配置 |—— build.js webpack打包服务 |—— webpack.base.conf.js webpack基本通用配置 |—— webpack.dev.conf.js webpack开发环境配置 |—— webpack.prod.conf.js webpack生产环境配置 ├── config 构建项目不同环境的配置 ├── public 项目打包文件存放目录 ├── index.html 项目入口文件 ├── package.json 项目配置文件 ├── static 静态资源 ├── .babelrc babel配置文件 ├── .gitignore git忽略文件 ├── postcss.config.js postcss配置文件 ├── src 项目目录 |—— page 页面组件目录 |—— router vue路由配置 |—— store vuex配置 |—— App.vue vue实例入口 |—— main.js 项目构建入口 四、配置 4.1 生成package.json文件 使用npm init命令生成一个package.json文件 4.1.2 全局安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g 4.1.3 在项目目录下安装webpack和webpack-dev-server npm install webpack webpack-dev-server -D 4.1.4 进入package.json配置npm scripts命令 "scripts": { "dev": "webpack-dev-server --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" } 五、构建脚手架目录 同学们可以通过自己的习惯和喜爱搭建自己的脚手架目录，下面讲解以上面脚手架结构为准！ 六、构建config/config.js 6.1 该文件主要用来配置构建开发环境和生产环境差异化的参数。 6.2 const _path = require("path"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); // vue-loader基本配置 const baseVueLoaderConf = { ... ... } 通过本文，我们可以学习到如何利用webpack搭建一个vue脚手架，包括项目结构、配置、构建等方面的详细讲解和注释。