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

1. 在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 中

1. 安装处理 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格式，当图片大于限制，则传递图片的源文件

2. 在 webpack 中使用 Vue

npm install vue -S

1. 在 main.js 中引入 Vue

import Vue from '../node_modules/vue/dist/vue.js'
var vm = new Vue({
    el:"#app",
    data:{}
})

1. 创建.vue文件，作为组件

<template>
    <div>
        <h1>这是从login.vue中得到的组件</h1>
    </div>
</template>

1. 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'

1. 在实例中注册组件

   ​

2. 注意项： webpack 默认只能打包 js ，对于css 和 vue 等文件，要确保安装了相应的loader

3. 在 login.vue 中可以定义 export default 对象，当作一个 vue 实例来用。

相当于 login.vue 向外面暴漏了一个对象

1. 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了