（黑马教程）-webpack学习笔记

一，webpack的初步认识

在我们写代码的时候，刚开始会在html文件中引入很多相关的资源，js文件啦，图片啦，less文件啦一系列的。
但是有些文件是不能直接执行的，比如less文件就需要转化为css文件才可以执行，而一些引用jq的js文件也需要一些工具处理之后才可以执行。
在这之前，我们都是自己利用小工具去完成文件的预编译转化成可以执行的文件，但是这样生成的文件又多，处理又麻烦。于是懒惰而又聪明的程序员宝宝们就把这些工具集合在一起啦，形成了webpack这个静态模块打包器。
换句话说：
在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)

二，webpack的五个概念

Entry
入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output
输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
Loader
Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS)
Plugins
插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。
5.Mode
模式(Mode)：指示 webpack 使用相应模式的配置。

三，webpack的初体验-表单的制作

第一步：新建项目空白目录，并运行npm init -y命令，文件夹下产生初始化包管理配置文件：package.json

第二步：新建src原代码目录，以后代码就写在这里面了。
第三步：新建src->index.html首页

第四步：初始化首页的基本结构
第五步：运行npm install jquery -s 命令，安装jQuery
第六步：通过模块化的方式去导入并使用jquery，实现列表隔行变色的效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="./index.js"></script><!-- 这里利用模块化的方式，把js的代码放置到index.js文件中，然后引入 --></head><body><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li><li>这是第9个li</li></ul></body>
</html>

对应的index.js文件：

import $ from 'jquery'$(function(){$('li:odd').css('backgroundColor','pink')$('li:even').css('backgroundColor','lightblue')
})

结果效果并没有实现：

import $ from 'jquery'

这句话报错了，那为什么这里会报错呢？那是因为这种语法属于es6的模块化语法，咱们浏览器对它支持地并不是很好。不识别，就报错了。
我们可以使用webpack进行转换一下，然后html中导入转换之后地js文件就可以啦。

     <script type="text/javascript" src="./index.js"></script><!-- 这里利用模块化的方式，把js的代码放置到index.js文件中，然后引入 -->

四，webpack的初体验-表单案例的webpack使用

上面的代码，浏览器不支持，这时候就需要配置webpack对它进行打包处理啦！
第一步：运行npm install webpack webpack-cli -D命令，安装webpack相关的包。
第二步：在项目目录中，创建名为webpack.config.js的webpack配置文件。
第三步：在webpack的配置文件中，初始化如下基本配置：

第四步：在package.json配置文件中的scripts节点下，新增dev脚本如下：

第五步：在终端中运行npm run dev命令，启动webpack进行项目打包。

打包完成，生成dist文件下的main.js文件。
现在去html中导入生成的main.js就可以啦：

完成，不会报错了。

五，配置打包的入口与出口


const path =require('path')
module.exports={mode:'development',   //指定输出的模式entry:path.join(__dirname,'./src/index.js'),//这样就指定好了入口文件的绝对路径output:{path:path.join(__dirname,'./dist'),//指定输出的文件夹filename:'bundle.js'// 指定输出文件的名称}
}

六，配置自动打包的功能

上面，我们的html文件是引用了经过webpack转化之后的js文件，但是当我们想要修改js代码时，修改的依旧是原生js代码，这样一来，又需要重新webpack打包一次才会更新，这样很麻烦，所以，有必要配置自动打包的功能，让我们修改原生js代码之后，自动完成打包：
第一步：运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具。
第二步：修改package.json ->scripts中的dev命令如下：

第三步：将src->index.html中的script引用路径更改为"/bundle.js"
第四步：运行npm run dev命令，重新进行打包
第五步：在浏览器中访问http://localhost:8080地址，查看自动打包效果

可以注意到，运行命令之后，并没有直接退出，也没有生成bundle.js，那是因为它在等待我们修改代码，一旦修改完成保存了，他就自动帮我们打包起来。

这里的意思是，bundle.js托管于http://localhost:8080/的根路径，也就是我们访问http://localhost:8080/bundle.js就可以看到这个原代码了。

这里就是我们项目的根目录。

<script src="/bundle.js"></script>

可以注意到的是，项目根目录下并没有出现bundle.js这个文件，但是http://localhost:8080/bundle.js却可以访问到，可以理解问这个文件并不存储于电脑的物理磁盘中，而是放在内存中，也就是说这里有一个隐藏的，看不见的bundle.js文件。
现在，只需要修改index.js的原文件后以保存，对应的bundle.js就会被webpack重新打包出来，然后再在页面上显示：

七，配置生成预览页面

在上述的例子中，我们访问http://localhost:8080之后，还要点击src才能进入html页面，这样也挺麻烦的，我们就想访问http://localhost:8080时直接显示这个html页面：

把index.html复制到根目录下，在根目录下如果有index.html,是会自动运行的。
那怎么把index.html复制到根目录下？
于是又引入了配置生成预览页面：
第一步：运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件
第二步：修改webpack.config.js文件头部区域，添加如下配置信息：

第三步：修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

const path =require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
//引入插件并创建对象
const htmlPlugin=new HtmlWebpackPlugin({//想要复制的对象的路径template:'./src/index.html',//生成对象的名字filename:'index.html'
})module.exports={mode:'development',  entry:path.join(__dirname,'./src/index.js'),output:{path:path.join(__dirname,'./dist'),filename:'bundle.js'},plugins:[htmlPlugin]
}

然后重新执行：npm run dev

在这个页面就直接显示了！、

八，配置自动打包的相关参数

在上面的代码中，我们还需要手动复制http://localhost:8080到浏览器才能显示项目，这样依旧有些麻烦，那有没有什么方法能够更方便一些？
让它在打包完成的一瞬间，自动打开浏览器并访问这个网址呢？

这样设置之后，重新npm run dev就会打开你电脑的默认浏览器了！

九，webpack中的加载器

上述的知识都是在讲如何打包js文件，而对于非js文件，它是打包不了的。于是有了loader加载器：

li{list-style: none;
}

然后就报错了，因为webpack只能处理js文件，处理不了这个css文件！
配置loader的步骤：
第一步：运行npm i style-loader css-loader -D命令，安装处理css文件的loader
第二步：在webpack.config.js的module->rules数组中，添加loader规则如下：

表示一旦匹配到.css结尾的文件，则调用loader文件来执行。

const path =require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const htmlPlugin=new HtmlWebpackPlugin({template:'./src/index.html',filename:'index.html'
})
module.exports={mode:'development',  entry:path.join(__dirname,'./src/index.js'),output:{path:path.join(__dirname,'./dist'),filename:'bundle.js'},plugins:[htmlPlugin],module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']}//这里设置好就可以啦！！]}
}

十，打包处理less文件

第一步：运行npm i less-loader less -D命令
第二步：在webpack.config.js的module->rules数组中，添加loader规则如下：

const path =require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const htmlPlugin=new HtmlWebpackPlugin({template:'./src/index.html',filename:'index.html'
})
module.exports={mode:'development',  entry:path.join(__dirname,'./src/index.js'),output:{path:path.join(__dirname,'./dist'),filename:'bundle.js'},plugins:[htmlPlugin],module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]}
}

十一，配置postCSS自动添加css的兼容前缀

十二，打包样式表中的图片和字体文件

第一步：运行npm i url-loader file-loader -D命令
第二步：在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']},{test:/\.jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:['url-loader?limit=16940']}]}

十三，打包处理js文件中的高级语法

第一步，安装babel转化器相关的包：npm install babel-loader @babel/core @babel/runtime -D
第二步：安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
第三步：在项目根目录中，创建babel配置文件babel.config.js,并初始化基本配置：

第四步：在webpack.config.js的module->rules数组中，添加loader规则如下：

   module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']},{test:/\.jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:['url-loader?limit=16940']},{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},]}

十四：vue单文件组件

传统组件开发过程中的问题：

//这是一个vue单文件组件<template><div><h1>这是APP根组件</h1></div>
</template><script>export default{data(){return{}}methods:{}}
</script><!-- 加上scoped之后，这里的样式就是这个组件私有的，就不会产生冲突了 -->
<style scoped>h1{color: red;}
</style>

然后在index.js中导入：

报错了，需要一个vue文件的加载器去处理这些文件。

十五，配置vue组件的加载器

第一步：运行npm i vue-loader vue-template-compiler -D命令
第二步：在webpack.config.js配置文件中，添加vue-loader的配置项如下：

十六，在webpack项目中使用vue

第一步：运行npm i vue -s安装vue
第二步：在src->index.js入口文件中，通过import Vue from 'vue’来导入vue构造函数
第三步：创建vue的实例对象，并指定要控制的el区域。
第四步：通过render函数渲染app根组件

App.vue:

//这是一个vue单文件组件<template><div><h1>这是APP根组件</h1></div>
</template><script>export default{data(){return{}}methods:{}}
</script><!-- 加上scoped之后，这里的样式就是这个组件私有的，就不会产生冲突了 -->
<style scoped>h1{color: red;}
</style>

index.js:

import $ from 'jquery'
import './css/1.css'
import './css/1.less'
$(function(){$('li:odd').css('backgroundColor','blue')$('li:even').css('backgroundColor','green')
})class Person{static info='aaa'
}
console.log(Person.info)//----------------------------
import Vue from 'vue'
//导入vue单文件组件
import App from './components/App.vue'const vm=new Vue({el:'#app',render:h=>h(App)//在vue控制的区域渲染这个vue组件
})

html文件：

<hr/><!-- 将来要被vue控制的区域 --><div id="app"></div>

十七，webpack的打包发布

写好这个之后，代码完成了，就可以使用npm run build进行打包，会生成dist目录，dist目录交给后台上线。