喜欢请关注 会不定时更新 ***
1.为什么使用webpack
- webapck能够处理JS文件相互依赖关系
例如：在main.js中引入其他js文件 - webapck 能够处理JS兼容性问题，把高级的、浏览器不识别的语法，转为低级的正常识别
- 语法指令（终端直接运行）
webpack 把要打包的文件路径 打包好的输出文件路径
2.为什么要创建webpack.config.js
- 思考：我们如何直接执行webpack指令（不需要上述复杂的操作） 就可以直接使用打包好的JS文件了呢（偷懒）
webpack.config.js这个配置文件，其实就是一个JS文件，通过node中模块的操作，向外暴露了一个配置对象
const path = require('path');
module.exports={
//入口、表示，要使用webpack打包哪个文件
//__dirname：全局变量，存储的是文件所在的文件目录
entry:path.join(__dirname,'./src/main.js'),
//输入文件相关配置
output:{
path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录里去
filename:'bundle.js'
}
}
- 总结
当我们使用webpack命令执行操作的时候，webpack做了以下几步- 首先,webpack发现，我们并没有通过命令形式，给它指定入口和出口
- webpack就会项目的根目录，查找一个叫做‘webpack.config.js’
- 当找到配置文件webpack.config.js后，webpack会解析执行这个配置文件，当解析执行完毕后，就得到了这个配置文件，导出的配置对象
- 当webpack 拿到配置对象后，就拿到了配置对象中的，指定的入口和出口，然后进行打包构建。
3.使用webapck-dev-server工具，实现自动打包编译功能
- 运行npm i webpack-dev-server -D把这个工具安装到项目本地开发依赖
- 安装完毕后，这个工具的用法，跟webpack用法完全一样
- 由于我们是在项目本地安装的webpack-dev-server，所以无法把它当作脚本命令，在powershell终端中直接运行，只有那些安装到全局-g的工具，才能在终端正常执行。
- 注意：webpack-dev-server 这个工具，如果想要正常运行，需要，在本地项目中，必须安装webpack。npm i webpack -D
- webpack-dev-server 帮我们打包生成的bundle.js并没有存放到物理磁盘中，而是直接托管到电脑的内存中，所以的项目根目录中，根本找不到打包好的bundle.js
- 我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的跟目录中 虽然我们看不到它，但是我们可以认为，和dist src node_modules 平级，有一个看不见的文件，叫做bundle.js
自动打开浏览器
在package.json下设置内容（npm run dev）
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
}
4.导入模块方式 improt
import *** from *** import $ from 'jquery'
5. webpack插件
- html-webpack-plugin
cnpm i html-webpack-plugin -D
作用：
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的 bundle.js 追加到页面中去
修改webpack.config.js这个配置文件：
plugins: [ // 配置插件的节点
new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML 页面的插件
template: path.join(__dirname, './src/index.html'),
// 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
filename: 'index.html' // 指定生成的页面的名称
})
]
6.使用webpack打包css文件及 webpack 处理第三方文件类型的过程
原因
- webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；
例如在入口文件main.js里引入
import './css/index.css' - 运行cnpm i style-loader css-loader --save-dev
- 修改webpack.config.js这个配置文件：
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
//处理css文件的规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
webpack 处理第三方文件类型的过程
- 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
- 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型
- 在调用loader 的时候，是从后往前调用的
- 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到 bundle.js 中去
7. 使用webpack打包less文件
- 语法
cnpm i less-loader less -D - 修改webpack.config.js这个配置文件：
test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']
8. 使用webpack打包sass文件
- 语法
cnpm i sass-loader node-sass --save-dev - 在webpack.config.js中添加处理sass文件的loader模块
{ test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
9. 使用webpack处理css中的路径
- 语法
cnpm i url-loader file-loader --save-dev
10.在webpack中配置.vue组件页面的解析
-
cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖； - 在webpack.config.js中，添加如下module规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
包的查找规则
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
// 回顾 包的查找规则：
// 1. 找 项目根目录中有没有 node_modules 的文件夹
// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
// 4. 在 package.json 文件中
//查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
// var login = {
// template: '<h1>这是login组件，是使用网页中形式创建出来的组件</h1>'
// }
// 1. 导入 login 组件
import login from './login.vue'
// 默认，webpack 无法打包 .vue 文件，需要安装 相关的loader：
// cnpm i vue-loader vue-template-compiler -D
// 在配置文件中，新增loader哦配置项 { test:/\.vue$/, use: 'vue-loader' }
总结
总结梳理： webpack 中如何使用 vue
- 安装vue的包：
cnpm i vue -S - 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader
cnpm i vue-loader vue-template-complier -D - 在 main.js 中，导入 vue 模块
import Vue from 'vue' - 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
- 使用
import login from './login.vue'导入这个组件 - 创建 vm 的实例
var vm = new Vue({ el: '#app', render: c => c(login) }) - 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；
网友评论