这篇文章主要给大家介绍了软玉利用webpack如何搭一个vue脚手架的相关资料,文中有超详细讲解和注释,对大家学习或者使用webpack具有一定的参考学习价值,需要的朋友们下面随着我来一起学习学习吧。

Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流。16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api。

本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

一.适用人群

1.对webpack知识有一定了解但不熟悉的同学.

2.女同学!!!(233333....)

二.目的

在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同学.

脚手架已放上github,不想听我啰嗦的同学可以直接去download或clone下来看哦.

脚手架里都有详细注释!

源码:https://github.com/webfansplz/xc-cli.git (本地下载)

觉得有帮助到你的同学给个star哈,也算是对我的一种支持!

三.脚手架结构├── 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 项目构建入口四.配置npm scripts4.1 生成package.json文件,配置npm scripts.

4.1.1 使用 npm init 命令,生成一个package.json文件!

npm init

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" }

通过配置以上命令:

我们可以通过npm start/npm run dev在本地进行开发,

scripts.dev命令解读:

通过webpack-dev-server命令 启动build文件夹下webpack.dev.conf.js。

也可以通过npm run build 打包项目文件进行线上部署.

scripts.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 = { //引入postcss插件 postcss: { config: { path: _path.resolve("../") } }, //转为require调用,让webpack处理目标资源! transformToRequire: { video: "src", source: "src", img: "src", image: "xlink:href" } }; //vue-loader 开发环境配置 const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, { //loaders loaders: { css: ["vue-style-loader", "css-loader"], less: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"] }, cssSourceMap: true }); //vue-loader 生产环境配置 const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, { //loaders loaders: ExtractTextPlugin.extract({ use: ["css-loader", "postcss-loader", "less-loader"], fallback: "vue-style-loader" }), cssSourceMap: false }); //开发/生产环境 配置参数! module.exports = { dev: { publicPath: "/", devtoolType: "cheap-module-eval-source-map", vueloaderConf: devVueLoaderConf, host: "localhost", port: "1234", proxyTable: {} }, build: { publicPath: "/", devtoolType: "source-map", vueloaderConf: buildVueLoaderConf, staticPath: "static" } };七.构建build/webpack.base.conf.js

7.1 此文件主要是webpack开发环境和生成环境的通用配置.

7.2

"use strict"; //引入node path路径模块 const path = require("path"); //引入webpack生产环境配置参数 const prodConfig = require("../config").build; //拼接路径 function resolve(track) { return path.join(__dirname, "..", track); } //资源路径 function assetsPath(_path) { return path.join(prodConfig.staticPath, _path); } //webpack 基本设置 module.exports = { //项目入口文件->webpack从此处开始构建! entry: path.resolve(__dirname, "../src/main.js"), //配置模块如何被解析 resolve: { //自动解析文件扩展名(补全文件后缀)(从左->右) // import hello from './hello' (!hello.js? -> !hello.vue? -> !hello.json) extensions: [".js", ".vue", ".json"], //配置别名映射 alias: { // import Vue from 'vue/dist/vue.esm.js'可以写成 import Vue from 'vue' // 键后加上$,表示精准匹配! vue$: "vue/dist/vue.esm.js", "@": resolve("src"), utils: resolve("src/utils"), components: resolve("src/components"), public: resolve("public") } }, module: { //处理模块的规则(可在此处使用不同的loader来处理模块!) rules: [ //使用babel-loader来处理src下面的所有js文件,具体babel配置在.babelrc,主要是用来转义es6 { test: /\.js$/, use: { loader: "babel-loader" }, include: resolve("src") }, //使用url-loader(file-loader的一个再封装)对引入的图片进行编码,此处可将小于8192字节(8kb)的图片转为DataURL(base64), //大于limit字节的会调用file-loader进行处理! //图片一般发布后都是长缓存,故此处文件名加入hash做版本区分! { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader", options: { limit: 8192, name: assetsPath("img/[name].[hash:8].[ext]") } } ] } };八.构建 build/webpack.dev.conf.js

8.1 该文件主要用于构建开发环境