前言
学习vue的过程肯定会接触到vue的单文件组件，进而接触到vue-cli(vue工程构建的脚手架工具)，但是vue-cli创建的工程对初学者很不友好，
vue init webpack-simple project-name创建的项目又太过简单和片面。
本教程会分几篇文章逐步深入配置webpack，想要后续更新可以关注哦~
接下来我们从初始化到写配置再到添加loader和插件逐步构建一个可用的vue工程化环境，让初学者亲自搭建vue-cli之余还了解到webpack常用的一些配置项。
一些官方文档
- webpack
- vue-loader
- .babelrc(babel配置)
- postcss(插件转样换式工具)和babelrc会在后面简单提及
- npm(用到插件就多去插件库查下用法)
vue-loader
vue-loader,是用于编译vue项目中组件化文件 *.vue ，把其转换为JavaScript的webpack loader。这是vue工作最重要也是一定会用到的loader，所以提前提一下。
创建工程
前提你已经安装了node、npm环境
mkdir project-vue
cd project-vue
npm init
//初始化设置都按enter默认就好，或者按你需要改
安装webpack到项目中
npm install --save-dev webpack
//啰嗦一下淘宝镜像设置
npm install -g cnpm –registry=https://registry.npm.taobao.org
创建webpack配置文件
webpack在运行时候会找到启用webpack命令目录下的webpack.config.js,所以要创建该文件到项目根目录下。
//webpack.config.js
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"js/[name].js"
}
}
以上是最简单的模板，设置了入口文件（entry）和出口地址（output），这些有一点webpack基础的都知道，不了解的先去入门一下webpack的基础配置。
而path函数则是node自带的路径相关的中间件，基本上整个项目就用到这样一个node的中间件，path就是用来做路径拼接返回一个路径字符串，可以简要看一下path。
- 同时还要创建index.html和main.js文件，项目目录结构如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/js/main.js"></script>
</body>
</html>
main.js里面随便写点js就行
运行一下试试
webpack
没有在全局安装webpacknpm install -g webpack的话以上命令无法执行。也可以修改npm scripts快捷运行,打开package.json,添加scripts项。
这里有一份阮一峰老师 npm script的介绍，不用谢
{
"name": "vue-demo",
"version": "1.0.0",
"description": "this is a vue demo",
"main": "index.js",
"scripts": {
"build": "webpack"
}
}
npm run build
根目录下会多出一个dist文件夹里面放了打包好的文件。
引入一系列的依赖和loader
vue工程当然要安装vue依赖啦~~
npm install --save vue
vue-loader是必须的，vue-template-compiler是vue-loader必须的依赖
npm install --save-dev vue-loader vue-template-compiler
写现代的项目怎么可能不用到es6以上，来个es编译器loader
npm install --save-dev babel-core babel-loader
再来个css的加载器和转换器,style-loader会把css转成js，再贴到html的style标签上的哦~
npm install --save-dev css-loader style-loader
还有图片文件和字体文件的加载器，url-loader依赖于file-loader所以都要安装，url-loader会把小于限制的文件改成base64格式直接传入src里面，可以降低网络请求次数。而file-loader会自动帮我们添加文件名规则而且url地址一起跟着改变。
npm install --save-dev file-loader url-loader
以上的loader的配置下面开始简要讲解
loader配置项
每一种loader都对应着一种文件，我们匹配项目种的文件添加loader。
配置项的简要介绍写在注释里啰, 认真看注释咯！！！
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry:{
app:'./src/main.js',
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:"js/[name].js",
},
module:{
rules:[
{
test:/\.js$/, //用正则匹配文件，用require或者import引入的都会匹配到
loader:"babel-loader", //加载器名，就是上一步安装的loader
exclude:/node_modules/ //排除node_modules目录，我们不加载node模块中的js哦~
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
// 'postcss-loader'
]
//依次使用以上loader加载css文件，postcss-loader可以暂时不加，后面再深入修改webpack配置的时候再说用处
//
//也可以写成这样 loader："style-loader!css-loader!postcss-loader"
},
{
test:/\.(png|jpe?j|gif|svg)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:'img/[name].[ext]?[hash]'
}
//图片文件大小小于limit的数值，就会被改写成base64直接填入url里面，
//不然会输出到dist/img目录下，[name]原文件名，[ext]原后缀，[hash]在url上加上一点哈希值避免缓存。
},
{
test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader:"url-loader",
options:{
limit:10000,
name:'fonts/[name].[ext]?[hash]'
}
//和上面一致
},
{
test:/\.vue$/,
loader:'vue-loader'
//这一个loader当然是vue项目必须的加载器啦，不加其他规则的话，
//简单的这样引入就可以了，vue-loader会把vue单文件直接转成js。
},
]
},
resolve:{
//引入路径是不用写对应的后缀名
extensions: ['.js', '.vue', '.json'],
//缩写扩展
alias:{
//正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
//用@直接指引到src目录下，如：'./src/main'可以写成、'@/main'
'@': path.resolve(__dirname,'./src'),
}
},
}
官方中文文档还介绍了一些以上用到的loader和其他的loader，可以去看一下。
用loader的时候可以上《npmjs》查看每个loader或者依赖的详细用法，这是一个好习惯！~
开始使用.vue
不要说你一点vue都不会来看这偏文章哦
main.js改成如下
import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'
new Vue({
el:"#app",
template:'<App/>',
components:{App}
})
新建一个app.vue文件
<template>
<div id="app">
<img src="./images/logo.png" alt="logo" />
<span>{{msg}}</span>
<p class="test">test text</p>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name:'app',
data(){
return {
msg:"hello vue !!"
}
},
}
</script>
<style >
.test{
color:#020202
}
</style>
<style lang="less"><!--我好像还没说引入less哦，下面说-->
#app{
img{width:100px;}
}
</style>
别忘了弄张图片，写个main.css哦
/*main.css*/
@import './reset.css';
#app{
color:red;
}
我还引入了reset.css
用less或者sass
你可以在项目中用less或者sass，相对的就要安装less-loader和sass-loader
npm install --save-dev less-loader
npm install --save-dev sass-loader
如果没有在全局安装less或sass编译器的话还有安装一下，执行上面loader安装之前先安装less或sass
安装到本项目中
npm install --save-dev less
安装到全局中
npm install --g less
以less-loader为例，修改webpack.config.js
{
test:/\.less$/,
use:[
'vue-style-loader'
'css-loader',
'less-loader'
]
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
'less':[//lang属性对应的名称
'vue-style-loader'//首先给vue的样式loader过滤一遍
'css-loader',//css-loader,把css转js
'less-loader'//用less编译
]
}
}
}
使用vue单文件组件的时候给lang属性添加标识就可以了，less后缀的文件也会一起进行编译
<style lang="less">
#app{
img{width:100px;}
}
</style>
sass类似，但sass带有两种语法规范sass和scss，需要分别设置，下面就贴一点vue-cli的代码，不过多的介绍了。
根据less和sass预处理器的添加和配置方法，你可以用上typeScript、pug等js和html的预处理插件。记得给template、script、style标签添加lang属性说明哦
有了es6 用上js的其他预处理语言的情况也不多了，html的话还是习惯写完整dom
打包运行一下
打包之前我改改npm scripts,这样就可以看到打包进度，和隐藏不必要的信息
"build": "webpack --progress --hide-modules"
运行打包
npm run build
在浏览器中打开index.html,可以看到运行正常
下期预告
目前整个vue项目基本可用，但是还处在最基础的loader添加和配置阶段，后续还有热插拔、代码提取、代码压缩的等一系列plugins（插件）的引入。
有vue-cli和webpack使用基础的人会认为，以上内容更偏向入门，但是凡事都有一个顺序渐进的过程，对初学者来说从0开始搭建是一个很有效的学习过程，基础工程搭好了，后面就是重头戏了。
下一期我们来进一步添加插件实现更多的功能，也会引入编译器转换器的第三方配置介绍（.babelrc、postcss）。
- 第二期已经更新 从搭建vue-脚手架到掌握webpack配置（二.插件与提取)
！！！文章首发地址
参考
- webpack 搭建 vue 项目(https://juejin.im/post/5a425cb4f265da43294e4f2e)
- vue-loader官方文档（https://vue-loader.vuejs.org/zh-cn/）
- wepack中文文档（http://www.css88.com/doc/webpack2/）
