Webpack在vue项目中的配置
1.使用webpack的必要性
在刚接触 webpack 的时候一直觉得这个打包工具是个可有可无的东西，不仅要写许多的配置代码，还要安装各种插件来使用。后来接触的次数多了，觉得如果没有 webpack 的打包是很难完成工作的，因此这次来总结一下 webpack 该怎么打包vue项目。
2.使用工具
- 编译工具：VS Code
- 打包工具：Webpack
3.配置步骤
① 创建项目文件夹
dist ：存放打包后的 js 的文件夹
src：存放html页面以及静态资源
② 安装webpack和webpack-cli
webpack 和 webpack-cli 都要全局安装后再本地安装
全局安装：-g
本地安装：–save-dev
1.全局安装 webpack
npm install webpack -g
2.安装 webpack 到项目依赖中（表示将webpack应用在此项目中）
npm i webpack --save-dev
3.安装 webpack-cli 到项目依赖中
npm install --save-dev webpack-cli③ 初始化项目：得到package.json（这一步可以放在第一步）
npm init -y④ 引入需要的包，如jquery
npm i jquery -S然后会在项目中生成一个node_modules文件夹
⑤ 在main.js中引入jquery
import $ from 'jquery'由于import是ES6语法，浏览器无法支持，因此就算main.js中引入了jquery，也无法使用
因此要对main.js文件进行处理，使得浏览器能够读懂里面的语句
⑥ 使用webpack处理main.js
webpack .\src\main.js --output .\dist\bundle.js⑦ html中引入bundle.js即可
总结：webpack能做什么
- 能处理 js 文件的相互依赖问题 （import）
- 能处理 js 的兼容问题，把高级语法转换成浏览器可以识别的语法
由于上述案例中，每处理一次main文件都要手动输入一次命令很麻烦，因此要借助config
8.在项目根目录中新建 webpack.config.js
const path = require('path')
module.exports = {
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
}
}此时，只要在根目录终端中 命令 webpack 即可自动打包处理main
总结：在终端在中 输入‘webpack’ 会发生什么
- 首先，没有发现 webpack 后面跟了入口路径和出口路径
- 然后，就会默认去寻找根目录下的 webpack.config.js 文件
- 接着，就会解析并执行配置文件中的内容
9.安装 webpack-dev-server 实现自动打包功能
npm install webpack-dev-server --save-dev
必须是在本地安装此时运行webpack-dev-server会报错，还要在 package.json文件中的 scripts中加一句
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
}然后运行 npm run dev 即可运行
★webpack-dev-server 生成的 bundle.js 在项目的根目录下
★如果要用webpack-dev-server，注意更改 index.html 的 script 路径
10.webpack-dev-server 帮我们打包生成的 bundle.js ，并没有放到实际的物理磁盘中，而是放到了电脑的内存中，所以，在项目根目录中，根本找不到这个打包好的bundle.js。
虽然看不到，但是可以认为其和dist、src等文件夹平级
webpack-dev-server 可加参数
"dev":"webpack-dev-server --open --port:3000"在package.json的scripts中加入open和port，即可在运行dev的时候就打开项目
webpack Loader
12.安装 loader 第三方模块加载器
在main.js中引入css文件
import './css/index.css'webpack 默认只能处理 js 文件，如果要处理 css 文件，则需要安装 loader
npm install style-loader css-loader -D- 在webpack.config.js 中配置这个 第三方模块加载器
module:{ //用于匹配所有的第三方模块加载器
rules:[ //定义匹配规则，为相应类型的文件找到其处理方式
{test:/\.css$/,use:['style-loader','css-loader']} //如果检测到css，则使用style-loader和css-loader进行处理
]
}然后 webpack 就会把 import 进来的css一起打包在 bundle.js中
webpack处理第三方包的形式
当 webpack 碰到不是 js 文件的时候，会在 webpack.config.js 中寻找相应的配置规则，如果有处理 这种文件的规则，则会调用
在调用 loader 的时候，是从右往前调用的，当 loader 调用完成后，会打包在 bundle.js 中
- 安装处理 css 中的 url 的第三方模块
npm install url-loader file-loader -D
install file-loader file-loader -D在 webpack.config.js中加入此设置
{test:/\.(jpg|png|gif|bmp|jpeg)/,use:'url-loader'}
只要是在css中出现了 url ，就需要引入 url-loader 来处理在 bundle.js 中，会把url 所引用的图片转成base64格式的图片
在 use 的 url-loader 后面可以使用 ?limit= 进行传参，可以限制图片的大小，当图片小于限制时，使用base64格式，当图片大于限制，则传递图片的源文件
- 在 webpack 中使用 Vue
npm install vue -S- 在 main.js 中引入 Vue
import Vue from '../node_modules/vue/dist/vue.js'
var vm = new Vue({
el:"#app",
data:{}
})- 创建.vue文件，作为组件
<template>
<div>
<h1>这是从login.vue中得到的组件</h1>
</div>
</template>- main.js 中引入 login.vue 文件
import login from 'login.vue'要注意：webpack 中只能打包 js 文件，.vue和 .css 文件一样无法被识别，因此要使用 loader
npm install vue-loader vue-template-compiler -D同样要在 webpack.config.js 中配置打包规则
test:/\.vue/,use:'vue-loader'- 在实例中注册组件
- 注意项： webpack 默认只能打包 js ，对于css 和 vue 等文件，要确保安装了相应的loader
- 在 login.vue 中可以定义 export default 对象，当作一个 vue 实例来用。
相当于 login.vue 向外面暴漏了一个对象
- export default 的用法
在 js 文件中可以定义 export default 对象，里面可以写一些 变量键值对
在其他的 js 文件中，可以使用 import a from ‘***.js’ ，通过变量 a 获取export 里面的值
★ 注意 一个 js 文件中只能有一个 export default 变量 ☆
但是 除了 export default ，还可以同时使用 export 向外暴露成员
export var title = ‘hello’
export var title2 = ‘helloworld’在其他 js 文件中，import { title } from ‘***.js’，只能用{ } 形式来接受，且接受名必须和导出名同名
即可使用 title
如果想换个别名来使用 import 的变量，可以用 import {title as mytitle} from ‘***.js’
重点
如果 main.js 要引入 jquery，则要在 webpack.config.js 中定义其全局可用
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
$: ‘jquery’,
jQuery: ‘jquery’
})
]否则， bootstrap.js 就找不到 jquery了
