Webpack配置解析-你所忽略的部分 Webpack配置解析-你所忽略的部分

喜欢请关注会不定时更新 ***

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配置解析-你所忽略的部分】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: '这是login组件，是使用网页中形式创建出来的组件' // }// 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 实例要控制的区域；