为了举例说明，随便建立了一个项目的小demo
注意：建立一个项目空文件夹之后一定要先初始化生成package.json的文件，用来记录后续下的包的详细信息
项目根目录里面必须有package.config.js .babelrc两个文件
项目文件夹
index.html当中不需要引入任何文件
index页面
main.js文件
main.js入口文件，所有的css.vue等外部资源都在这个mian.js中引入
使用render来渲染组件
main页面
webpack配合vue
建立文件后缀名是.vue，这个文件组成包括三大部分
<template></template> <script></script> <style></style>
在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象
准备的vue文件
一.下载需要安装的包
1.全局的环境下安装 cnpm i webpack webpack-cli -g
2.首先建立项目文件夹加，npm init -y初始化 生成package.json文件，记录下载包的详细信息
3.在局部的环境下下载 cnpm i webpack webpack-cli -D
4.局部环境下载cnpm i webpack-dev-server
5.局部环境下载 cnpm html-webpack-plugin -D
6.局部环境下载 cnpm i style-loader css-loader -D
7.局部环境下载 cnpm i less-loader less -D
8.局部环境下载cnpm i sass-loader node-sass --save-dev
9.局部环境下载 cnpm i url-loader file-loader --save-dev
10.局部环境下载 cnpm i babel-core babel-loader@7.1.2 babel-plugin-transform-runtime --save-dev
cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev
二.关于包的讲解
1.在全局的环境下面下载了webpack webpack-cli,然后在局部的环境的还安装的原因是为了后面配置webpack-dev-server
2.webpack-dev-server的包
下载前提是项目文件夹已经安装了局部的webpack，这个可以实现文件的自动打开，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建，安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中，把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
注意：运行npm run dev 的时候只是在测试环境中运行，并没有实现文件的真正打包输出，所以dist文件还是空格的，所有项目弄完了之后，运行命令 webpack 才会实现真正的打包输出，dist文件夹当中才会有内容
需要在package.json中进行相应的配置
配置dev
测试环境运行就是 npm run dev (这个时候还没有实现真正的打包，所有的打包文件都在内存中，dist文件夹里面还是空的）
等到项目完成的时候再运行 webpack进行真正的打包操作
3.html-webpack-plugin的包
这个插件的主要作用是根据指定的页面在内存生成相应的页面，第二点自动把打包好的bundle.js插入到页面中，就不需要在index.html当中手动引入，这个插件会自动创建一个script标签，并引用bundle.js
4.style-loader css-loader的包
用来解析cas的
5.less-loader less的包
用来解析less文件的
6.sass-loader node-sass的包
要用cnpm下载 用来解析sass文件的
7.url-loader file-loader 的包
用来解析图片和字体图标中的url路径
后面可以给参数，用来限制图片的大小
给定的值是图片的小，单位是byte，引用图片》给定的limit，则不会被转变为base64，引用图片小于给定的limit，则会转变为base64
为了让图片保持原名，而且又不重名，给hash值 'url-load?limit=7631&name=[hash:8]-[name].[ext]'
8.babel的包
用来解析js的高级语法
在webpack当中默认只能处理一部新的es6语法，一些更高级的语法，当第三方的loader来帮忙处理这些高级语法，把高级语法转换为低级语法
三.配置文件
1. .babelrc文件配置详情
该文件内部不要写注释 字符串必须是双引号
2.package.config.json文件的配置详情
截取分为两个部分
前部分：
后部分：
网友评论