首页手记手把手...

手把手教你一步步--搭建vue脚手架，配置webpack文件

标签：

Vue.js

vue.png

序言

本人之前都是利用大牛们提供配置好的项目,然后在本地配置npm install,最后运行npm run dev，在这些项目基础上去开发新项目；就算不利用大牛的配置项目，都是全局安装了vue脚手架，webpack,然后npm init webpack project，就可以新建一个大部分插件，命令行配置和封装好的项目，就可以npm install，npm run dev运行项目开始开发，在开发中用到啥就配置啥。。。

可是我对项目里面webpack封装和配置好多东西都不清楚，因为没有深入去了解；所以我想一步步弄清楚里面的配置信息，我打算自己一步步来配置安装搭建整个项目起来；无意中在讨论群上看到分享的电子档vue.js实战，是尤雨溪老师作推荐序，·梁灏老师编著；这本书籍值得推荐大家看看，特别对于我这种初学者更适合；看了梁灏老师这书籍，特别是webpack配置这章节，我按着步骤学着并上手实践，下面的内容就是我一步步安装配置搭建后的项目流程的一些总结与感想还有梁灏老师写的书籍里面需要注意的知识点我也记录下来，整理成文章，目的是有利于往后自己遗忘可以查找并同时分享给大家，希望可以帮助对于webpack+vue项目搭建的一些配置信息和步骤不太清楚的小伙伴们；若文章有写的不好，或者有理解分析错误的点，请大家体谅并纠正，谢谢！

1)新建空目录newDemo，使用npm初始化配置npm init

vw.png

说明：配置后项目里面就多了package.json文件

2)安装webpack，输入命令行npm install webpack --save-dev

vw2.png

安装好后package.json多了一行webpack指令

vw3.png

3）安装热更新，输入cnpm install webpack-dev-server --save-dev

vw4.png

说明：这里和往后内容使用
cnpm是因为我本地安装淘宝镜像，用cnpm配置安装命令行更快

安装好后package.json多了一行webpack-dev-server指令

vw5.png

4）新建webpack.config,js基本配置文件，在配置文件里进行初始化

vw6.png

5）在package.json配置dev指令

vw7.png

说明：配置好这条指令后就可以在命令板中输入npm run dev运行项目；在浏览器显示的地址是默认的 :8080/；如果不想要默认，可以改端口为：在package.json文件的scripts改dev为："webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"

6)在demo目录下新建mainjs

在webpack.config.js配置以下内容：入口配置和出口配置

vw9png.png

需要特别注意：dirname前面是有两横（我就设置了一条横线，导致报错，看似小问题，可这坑不小，因为没留意，都找不到这bug）

vw10.png

6)继续在项目中新建一个index.html

在index.html中设置以下内容：（需要把main.js入口文件引入index.html文件中）

vw11.png

输入npm run dev运行项目，下面显示命令行是成功调用：

vw12.png

调用成功后自动打开浏览器显示页面内容：端口默认为8080

vw13.png

7)为了测试命令行配置成功和webpack-dev-server的热更新功能成效；

在main.js文件里修改index.html文件里面的内容，再运行项目看看浏览器显示内容的变化情况：

vw14.png

因为配置webpack-dev-server的热更新功能，修改后浏览器会自动更新修改后的内容：（说明前面的命令行配置成功）

vw15.png

温馨提示：每次修改项目，并没有刷新浏览器，就已经自动更新；这就是webpack-dev-serverd 热更新功能,它是通过建立一个webSocket（H5）连接来实时响应代码的修改，webSocket是客户端与浏览器双向响应

可以按f12，在浏览器的调试模式里查看到websocket

vw16.png

8)继续配置webpack --progress --hide-modules

说明：生成目录dist中的main.js，这是个打包过程

vw17.png

已经生成dist目录的mainjs打包文件

vw18.png

9）若用到一些css样式，就需要用到style-loader和css-loader

配置css-loader命令行

vw19.png

配置style-loader命令行

vw20.png

配置css-loader/style-loader命令行后，在webpack.config.js配置文件里配置loader，增加对.css文件的处理

vw21.png

温馨提示：在配置文件中的module对象的rules属性中可以指定一系列的loaders，每个loader都必须包含test和use两个选项，意思是当webpack编译过程遇到require或import语句导入一个为.css文件，将它通过css-loader转换，再通过style-loader转换，然后继续打包；use选项的值可以是数组或字符串，如果是数组，它的编译顺序就是从后往前；

示例：

在项目目录下新建一个style.css文件

vw22.png

然后在main.js入口文件里面用import引入：

vw23.png

浏览器自动更新内容的字体样式（启动热更新功能）

vw24.png

此时可以在浏览器可以看到css是通过js动态创建<style>标签来写入的

vw25.png

注意：上面用的方法，实际业务中，一般不用，因为项目大了样式会很多，都放在js里太占体积，不能做缓存；所以一般会用到extract-text-webpack-plugin 的插件来把散落在各地的css提取出来，并生成一个main.css的文件，最终在index.html里通过<link>的形式加载它：

10)配置extract-text-webpack-plugin插件

vw26.png

配置插件后在package.json中有显示配置后的extract-text-webpack-plugin命令行

vw27.png

配置好插件后也需要修改webpack.config.js配置文件为以下内容：

vw28.png

最后在index.html中引入main.css文件（.vue为后缀的文件中的style样式都统一打包在main.css文件中）

vw29.png

11)需要用到.vue为后缀的文件，则需要在webpack中使用vue-loader就可以对.vue格式的文件进行处理

需要配置以下的所有命令:例如需要用到.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置；要使用es6语法，需要安装babel和babel-loader等加载器（注意一条都不能配置漏，不然出现报错可能影响往后的运行与配置）：

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime

配置好以上的命令行，package.json添加这些命令行

vw30.png

配置以上命令行后，在webpack.config.js配置文件中设置以下内容：

vw31.png

说明：vue-loader在编译.vue文件时，会对<template>、<script>、<style>分别处理，所以在vue-loader选项里多了一项options来进一步对不同语言进行配置，如在对css处理时，会先通过css-loader解析，然后把处理结果再交给vue-style-loader处理

12）在demo目录下新建.babelrc文件，并写配置内容，webpack会依赖配置文件用babel编译es6代码

vw32.png

说明提示：配置好以上的这些命令后，就可以使用.vue后缀文件进行开发了，现在每个.vue文件就代表一个组件，组件之间可以相互依赖

13）因为配置以上命令行，可以使用.vue后缀文件,新建app.vue文件，并且设置内容为以下：

vw33.png

把app.vue引入入口文件main.js：

vw34.png

浏览器自动更新显示：

vw35.png

在浏览器的调试模式中会看到div标签中出现属性data-v-xxx ，那是因为使用了<style scoped>，样式只作用本组件中；如果去掉scoped，div标签就没有data-v-属性，只是单纯的普通标签<div>文本数据</div>

vw36.png

14）在demo目录新建component文件夹放title.vue和button.vue文件

vw50.png

然后把这两个组件导入app.vue根组件中

vw51.png

15）配置url-loader和file-loader来支持图片、字体等文件

npm install --save-dev url-loader
npm install --save-dev file-loader

配置后需要在webpack.config.js文件中配置test/loader

vw52.png

补充说明：?limit=1024表示的作用是：
当遇到.gif、.png、.ttf等格式文件时，url-loader会把它们一起编译到dist目录下，“？limit=1024”是指如果这个文件小于1kb，就以base64的形式加载，不会生成一个文件

示例：

新建一个image文件夹放图片

在app.vue根组件里面加入img标签

vw53.png

浏览器自动更新显示

vw54.png

16）项目打包，需要配置两个打包依赖：

npm install --save-dev webpack-merge
npm install --save-dev html-webpack-plugin

配置后在目录新建webpack.prod.config.js生产环境的配置文件（该文件在基本配置文件的基础上扩展）

webpack.prod.config.js文件设置以下内容：

var webpack=require('webpack');
var HtmlwebpackPlugin=require('html-webpack-plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var merge=require('webpack-merge');
var webpackBaseConfig=require('./webpack.config.js');
//清空基本配置的插件列表
webpackBaseConfig.plugins=[];
module.exports=merge(webpackBaseConfig,{
output:{
publicPath:'/dist/',
// 将入口文件重命名为带有20位hash值的唯一文件
filename:'[name].[hash].js'
},
plugins:[
new ExtractTextPlugin({
// 提取css，并重命名为带有20位hash值的唯一文件
filename:'[name].[hash].css',
allChunks:true
}),
// 定义当前node环境为生产环境
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"'
}
}),
// 压缩js
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
// 提取模板，并保存入口html文件
new HtmlwebpackPlugin({
filename:'../index_prod.html',
template:'./index.ejs',
inject:false
})
]
});

配置打包依赖后在package.json文件里加入build的快捷脚本打包

"scripts":{
.......
“build“:"webpack --progress --hide-modules --config webpack.prod.config.js"
}

vw55.png

补充说明：上面安装的webpack-merge模块就是用于合并两个webpack的配置文件，所以prod的配置是在webpack.config.js基础上扩展的；静态资源在大部分场景下都有缓存（304），更新上线后一般都希望用户能及时地看到内容，所以给打包后的css和js文件的名称都加了20位的hash值，这样文件名就唯一了，只要不对html文件设置缓存，上线后立即就可以加载最新的静态资源。