一步步教你利用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-dev-server -g 4.1.3在项目目录下安装webpack和webpack-dev-server npm install 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脚手架,包括项目结构、配置、构建等方面的详细讲解和注释。
116.93KB
文件大小:
评论区