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 处理第三方文件类型的过程

• 发现这个 要处理的文件不是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 实例要控制的区域；