webpack学习记录一：webpack基础认识

一、什么是webpack

1.当前web环境文件依赖错综复杂
2.静态资源请求效率低
3.模块化支持不友好
4.浏览器对高级js特性兼容程度较低
所以引申出webpack，前端项目构建工具，webpack提供了友好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大的功能，从而让工作的重心放到具体功能的实现上，提高了开发效率和项目的可维护性。

二、使用

要是主页面是使用

<scrit src ='index.js'></script>

引入的一个js文件

而这个js文件中使用了

import $ from 'jquery'

这种做法是行不通的
import是es6模块语法，这时候就需要babel进行转换了

1.安装webpack

npm install webpack webpack-cli -g

安装webpack和webpack-cli工具，-g表示全局安装

2.创建webpack.config.js的webapck配置文件

在项目根目录下创建

3.配置文件

在webpack.config.js中

module.exports = {
   mode:'development'  
   //mode用来指定构建模式，development表示开发环境，
   //还有一个值是production
   //development下转换的代码不会进行压缩和混淆，转换速度快
   //production下，转换后会对代码进行压缩和混淆，转换速度慢
   
}

在package.json文件中配置，找到script字段，新增dev脚本

"script":{
 "dev": "webpack"
}
//可通过npm run 来执行scrip字段里的命令

4.打包文件

在终端中运行

npm run dev

可以进行文件的打包
运行后会输出一个min.js文件
在dist文件夹里，是自动创建的。
这时候就能使用这个js文件了。它是webpack进行转换后输出的，不存在兼容性问题。 可以使用

三、webpack打包的入口和出口配置

webpack的4.x版本中默认约定
打包的入口文件为src文件夹下面的index.js
打包的输出文件为dist文件下的main.js
所以要遵循这个规定

要是修改打包的入口和出口，在webpack.config.js中配置

const path = require('path')
//导入node.js中专门操作路径的模块

module.exports = {
  entry  :path.join(__dirname,'./src/index.js')
  //打包入口文件的地址,入口和出口都要传绝对路径
  output:{
  path:path.join(__dirnam,'./dist')
  //输出文件的存放路径
  filename:'budle.js'
  //输出文件的名称
}
}

index.html要记得引入打包后的文件，才能生效。这样就不必引入未打包前的文件

四、配置webpack的自动打包功能

因为引入每次都是引入的打包好的文件，每次修改源代码后，都需要重新手动执行npm run dev打包功能，才能刷新打包后的文件。重新打包后会替换掉原先的同名文件。
所以需要配置自动打包功能，不用手动打包，

1.安装webpack-dev-server

npm install webpack-dev-server -D

这个插件可以支持项目自动打包功能，webpack-dev-server会启动一个实时打包的http服务器。会监听项目中代码的变化。
webpack-dev-server打包生成的输出文件，默认放到了项目的根目录中，是虚拟的，看不见的。

2.修改package.json下的script的dev命令

script:{
  "dev":"webpck-dev-server"
  //修改这个命令
}

3.修改src下的index.html文件

将script标签引入的文件修改为根路径下的’/build.js’，即打包后的文件，而不是写相对路径了。因为这个文件是在内存中的。

4.运行

num run dev

运行后，webpack会把打包后的文件托管到http:localhost:8080下的“/”路径下
http:localhost:8080/build.js就可以访问到这个build.js这个打包后的文件
直接访问http:localhost:8080会访问到当前项目的所有文件。
而build.js本地是看不到的，是存在内存，项目中是没有的。所以index.html需要把script的src改成“/build.js”,表示是从http:localhost:8080/build.js获取的js文件，而不是从本地。

5.在浏览器中访问

http:localhost:8080
可以查看自动打包效果
这后修改代码后，直接保存代码就能自动刷新，不需要再手动打包了。

五、配置预览页面

因为上面自动打包后http:localhost:8080访问的不是想看到的页面，而是一个地址，所以需要配置一下，可以立即看到页面

1.安装html-webpack-pluugin插件

其实就是把src的页面复制到网站根目录中。

npm install html-webpack-pluugin -D

生成预览页面插件，

2.修改webpack.config.js文件的头部区域

 const HtmlWebpackPlugin  = require('html-webpack-pluugin')
//导入生成预览页面的插件，得到一个构造函数
 const htmlPlugin  = new HtmlWebpackPlugin  ({
        //创建插件的实例对象
        template:'./src/index.html'
        //指定要用的模板文件 
        filename:'index.html'
        //指定生成的文件的名称，该文件存在于内存中，在目录中不显示

})

3.修改webpack.config.js文件中向外暴露的配置对象

新增如下配置节点：

module.exports = {

 entry  :path.join(__dirname,'./src/index.js')
  //打包入口文件的地址,入口和出口都要传绝对路径
  output:{
  path:path.join(__dirnam,'./dist')
  //输出文件的存放路径
  filename:'budle.js'
  //输出文件的名称
    plugins:[ htmlPlugin]
    //plugins数组是webpack打包期间会用到的一些插件列表
}

六、配置打包相关参数

1.打包完成后，自动打开浏览器，显示页面

1.找到pack.json文件的script节点

"script ":{
  "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
//--open 打包后自动打开浏览器页面
//--host 配置IP地址,默认的地址是localhost，配置这个后，就修改了默认的地址。
//--port 配置端口 默认端口是8080，配置之后就修改了默认的端口

每次修改配置文件后，都需要重新运行项目。

七、webpack中的加载器

在实际开发过程中，webpack默认只能打包处理.js后缀的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。

loader加载器

作用：loader加载器可以协助webpack打包处理特定的文件模块
loader调用过程：
webpack首先判断是否是js模块
是的话
再判断是否包含高级js语法
是的话
再判断是否配置了babel
是的话
就调用loader处理
没有配置babel
就报错
要是没有包含高级js语法，webpack自己处理

要是不是js模块
再看是否配置了对应的loader
是的话
就调用loader处理
不是的话
就报错

1.css-loader

这个加载器就能打包处理css文件

1.安装 style-loader css-loader

npm install style-loader css-loader  -D

2.配置loader规则

在webpack.config.js文件中的

module.exports = {
plugins:[htmlPlguin],
module: {
  rules:[
     { test:/\.css$/,use:['style-loader','css-loader'] }
]
}
//test表示匹配的文件类型,test接受一个正则表达式，\.表示匹配点好$表示css结尾的，user表示对应要调用的loader，这里是style-loader和css-loader,这里的顺序要固定，先配置style-loader，在配置css-loader，
//多个loder的调用顺序是从后往前的，先调用css-loader，在调用style-//loader，再告诉webpack打包合并
}

3.使用压缩后的文件

在入口文件中写

import './1.css'

直接引入源文件即可,运行webpack时会自动压缩，转换

2.less-loder

可以打包处理.less相关的文件

1.安装less-loader less

npm install less-loader less -D

less 是less-loader的内置依赖性

2.配置loader规则

module.exports = {
plugins:[htmlPlguin],
module: {
  rules:[
     { test:/\.less$/,use:['style-loader','css-loader','less-loader'] }
     //less-loader也依赖上面的两个loader，也要一起写上去
]
}

3.使用压缩后的文件

在入口文件中写

import './1.less'

直接引入源文件即可,运行webpack时会自动压缩，转换

2.sass-loader

可以打包处理.scss相关的文件

1.安装sass-loader node-sass

npm install sass-loader node-sass -D

node-sass 是sass-loader的内置依赖项

2.配置loader规则

module.exports = {
plugins:[htmlPlguin],
module:{
  rules:[
     { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }
     //sass-loader也需要上面的两个loader，也要一起写上去
]
}

3.引入压缩后的文件

import './1.scss'

直接引入源文件即可,运行webpack时会自动压缩，转换

3.url-loader

打包样式表中的图片和文字字体库
打包jpg

1.安装

npm install url-loader file-loader -D

file-loader是url-loader的内置依赖项

2.配置webpack.config.js文件

module.exports = {
module: {
  rules:[
     {
      test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
      //指定匹配的文件名，包括图片和字体
     use:'url-loader?limit=16940'
     //use可以放数组，或者字符串，多个用数组，可以用字符串，里面是加载器的名称
     //使用url-loader来处理,?之后的是参数
     //limit用来指定图片的大小，单位是字节（byte），只有小于limit大小的图片，才会被转为base64图片，这种格式可以在图片加载时更快一些，大于或等于不会转为base64，会生成一个图片存放地址，是一个url地址，会从这个地址下载图片
     }
   
]
}

4.postCSS

自动添加css的兼容前缀
解决css在不同浏览器的兼容性问题。
比如input里的占位符文字

::placeholder{
  //就能选择
}

而在ie中就不兼容
所以需要自动的添加兼容写法，引申出postCSS

1.安装

npm install  postcss-loader autoprefixer -D

2.创建postcss.config.js文件

在项目根目录中创建。

3.配置postcss.config.js文件

const autoprefixer = require('autoprefixer ')
//导入插件
//暴露一个对象
module.export = {
    plugins :[autoprefixer ]
    //挂载插件
}

4.配置webpack.config.js文件

module.exports = {
plugins:[htmlPlguin],
module:{
  rules:[
     { test:/\.css$/,use:['style-loader','css-loader','postcss-loader'] }
     //修改css的压缩文件规则，添加这个加载器
]
}

5.打包js的高级语法

即使用babel转换器

1.安装babel转换器相关的包

npm install babel-loade @babel/core @babel/runtime -D

2.安装babel语法插件相关的包

npm instasll @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properTies -D

3.创建babel.config.js文件

在项目根目录下创建

4.配置babel.config.js文件

module.exports = {
 presets:['@babel/preset-env'],
 plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']

}

5.配置webpack.config.js

在rule里继续添加

module.exports = {
module:{
  rules:[
     { test:/\.js$/,
     //webpack可能有些高级语法处理不了，所以需要babel来处理，进行解析和转换
     use:'babel-loader',
     exclude:/node_modules/
     //exclude为排除项，表示babel-loader不需要处理node_modules下的js文件，node_modules都是第三方包，不需要转换，所以必须要有这个
}

]
}

八、Vue单文件组件

传统的定义组件和解决方案
1.全局定义的组件必须保证组件的名称不重复，
2.字符串模板缺乏语法高亮，在HTML有多行时，还需要用到
3.不支持css意味着当HTML和css组件化时，css明显被遗漏
4.没有构建限制，只能使用HTML和ES5js，而不能使用预处理，如babel

解决方案：
vue提供了单文件组件，以.vue结尾的文件。

1.单文件组件的组成结构

template 组件的模板区，写html代码的地方
script 业务逻辑区
style 样式区域

单文件的通用模板

<template>
//这里定义vue组件的模板内容
//一定且只能有一个根标签
</template>

<script>

export default {
     data(){
      return {
       //私有数据
},
methods:{
     //处理函数
}
}

}
</script>


<style scoped>
//这里用于定义组件的样式
//scoped表示写在这里的样式只能这个组件使用，不会影响到其他组件
</style>

2.vue单文件的加载器

在使用这个单文件组件时，直接在入口文件中导入这个组件，会报错
所以需要配置一个加载器

1.安装

npm install vue-loader vue-template-compiler -D

2.配置webpack.config.js，添加vue-loader的配置

const VueLoaderPlugin = requrie('vue-loader/lib/plugin')
//接受插件，这是一个构造函数
module.exports = {
    module: {
   rules:[
    {
    test：/\.vue$/,loader:'vue-loader'
      //写规则解析转换vue文件
  }

]
}
plugins:[
   new VueLoaderPlugin()
   //一定确保引入这个插件
]

}

九、在webpack中使用vue

1.安装vue

npm install vue -s

2.引入vue

在src的index.js入口文件中，用过import Vue from ‘vue’ 来导入
vue构造函数

import Vue from 'vue'
//引入vue
import App from './components/APP.vue'
//引入根组件

3.创建vue实例对象

const vm = new Vue({

})

4.通过render函数渲染App根组件

const vm = new Vue({
 el:'#app',
 //el指定要控制的区域
 render:h=>(App)
//将根组件渲染到控制的区域
//在webpack中导入的vue不是完整的vue，是阉割般的。它只能通过rende函数来渲染页面。不支持componet和template
})

十、webpack的打包发布

1.修改package.json文件

找打script节点

"script":{
    "build" :"webpack -p"
    //-p是打包相关的参数
    //它会读取webpack.config.js的配置内容
    //打包后会自动生成dist文件夹，里面包含了打包后的文件
    //里面有一个html文件和js文件
    //可以放到服务器上直接使用了
}