webpack学习笔记(1)

webpack：前端的构建工具，由很多小工具构建组合而成。静态资源打包器，将前端的所有资源文件(js/css/json/img/less/...)都作为模块进行处理，这个处理过程叫打包。

为什么要用到webpack？
前端开发越来越复杂，越来越多的页面拥有复杂的js代码和一大堆的依赖包。有些还使用了基于js开发的语言，TypeScript，这种新语言很多浏览器还不能识别。还有像less这张预处理器，浏览器也不认识，不能呈现css样式，需要一种工具转为css语法。还有比如在js文件中通过es6的import引入其它模块，浏览器也不能识别import命令。
那为了让浏览器能识别这些语法或者命令，需要构建一个大工具，将这些小的模块工具进行处理，转换成浏览器能认识的语法。所以就出现了webpack这个构建工具。

webpack打包流程：
把项目当做一个整体——>找到入口文件index.js——>分析index.js中引入的项目结构，形成一个依赖关系树状图——>根据依赖关系的先后顺序引入对应资源，形成chunk(代码块)——>
对chunk代码块处理(处理过程叫打包)，比如将less文件编译成css文件，将es6编译成es5——>打包结束后，输出一个名为bundle.js的文件

webpack的五个核心概念：
Entry：指示webpack以哪个入口文件打包。
Output：指示webpack打包后的资源输出到哪里，以及如何命名。
Loader：处理非js文件，比如把scss/less转为css、es6转为es5、Typescript转为es5、img图片等处理成webpack能识别的文件。webpack只认识js。
Plugins：执行范围更广的任务，打包优化、文件压缩等
Mode：分为开发者模式、生产者模式

webpack初体验：
npm init要依赖Node.js的话，最好通过npm init初始化得到package.json文件。
npm i webpack webpack-cli -g：全局安装webpack和webpack-cli两个包。
webpack-cli是干嘛的？为什么要安装这两个包？
npm i webpack webpack-cli -D：将这两个包添加到开发时依赖。
新建src文件夹和dist文件夹——>在src文件夹下新建index.js入口文件，在dist文件夹下新建index.html。（没有index.html文件的情况下，可直接在命令行输入node ./dist/budle.js查看输出结果）
在index.js文件中执行简单的测试：

//运行命令:
    //- 开发环境:webpack ./src/index.js -o ./dist/bundle.js --mode=development
        // -webpack会以index.js为入口文件进行打包，打包后输出bundle.js文件到dist文件夹下。整体打包环境是开发环境
    //- 生产环境:webpack ./src/index.js -o ./dist/bundle.js --mode=production
        // -webpack会以index.js为入口文件进行打包，打包后输出到dist文件夹下的bundle.js文件。整体打包环境是生产环境，在生产环境下bundle.js内的代码会被压缩。

function add(x,y){
    return x + y
}
console.log(add(2,2))

//测试json文件能不能打包
import hh from './data.json'
console.log(hh)
//测试css文件能不能打包——>报错
import './index.css'

在index.html中引入index.js

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

执行完打包命令后，查看index.html的控制台，可以看到add()输出的结果以及data.json的数据。但是打包index.css报错，因为webpack不能识别css文件。要能识别css文件，必须定义webpack.config.js配置文件：打包css文件必须在开发环境下

//所有的构建工具都是基于Node.js构建的，所以它们都遵循commonJS规范。
// 引入node中的path核心模块
const path = require("path")

module.exports = {
//入口起点
  entry:"./src/main.js",
  output:{
    //在node中通过__dirname动态获取绝对路径，__dirname是Node.js中的变量
    path:path.resolve(__dirname,'dist'),
    //输出文件
    filename:"bundle.js"
  },
//模块的配置
    module:{
        rules: [
            {
                test: /\.css$/,
          //css-loader:将css文件变成commonJS模块加载到JS文件中，里面的内容是样式的字符串
          //style-loader:创建style标签，将js中的样式字符串添加到标签内，再将style标签插入到head标签中
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
          //less-loader:将less文件编译成css文件
          //css-loader:将css文件变成commonJS模块加载到JS文件中，里面的内容是样式的字符串
          //style-loader:创建style标签，将js中的样式字符串添加到标签内，再将style标签插入到head标签中
                use: [ 'style-loader', 'css-loader' ,'less-loader']
            }
        ]
    }
//插件配置
Plugins:{

}
//模式配置(二选一)
mode:"development"
//mode:"production"
{

配置好后，安装css-loader、style-loader两个包。
npm install css-loader --save-dev
npm install style-loader --save-dev
打包less文件，还需额外下载less-loader、less两个包。
npm install less-loader --save-dev
npm install less --save-dev

打包HTML资源

//插件配置
//(1.先下载(npm i html-webpack-plugin -D)  2.引入(const HtmlWebpackPlugin = require('html-webpack-plugin')) 3.使用)
plugins:[
//功能:默认会创建一个空的html文件，自动引入打包后输出的资源
//需求：生成的空html文件能保留./src/index.html文件内的内容
    new HtmlWebpackPlugin({
        template:'./src/index.html'
    })
],
mode:'development' //注意，在生产环境下，html文件打包后会被压缩的，开发环境下不会

打包图片资源(必须在开发环境下打包，生产环境打包不生效)
分两种情况：第一种是打包background:url(...)中的背景图片，第二种是打包HTML中<img>标签内的图片。

//在module/rules/下配置:
//第一种情况：
{
    test:/'\.(jpg|png|gif|jpeg)$'/,
    use:[
      //需要安装url-loader、file-loader
      {
          loader:'url-loader',
          options:{
//如果要显示的图片大小小于8kb(8192),则会将图片转为base64格式的字符串,在页面中的url显示的就是base64格式的url
    优点：减少图片请求次数
    缺点：增大图片体积
    limit的值设为多大，根据项目使用的图片大小来确定。
//如果图片大小大于8kb,则要安装npm install --save-dev file-loader，file-loader会把这个图片打包到dist文件夹下
              limit:8 * 1024,
            // 给打包后的图片重新命名
              name:'img/[name].[hash:8].[ext]'，
            //使用html-loader存在的问题：因为html-loader是遵循commonJS编译图片的，url-loader默认是使用es6模块化解析图片的
            //所以导致解析出的图片的src='[object Module]',咋办
            //设置esModule:false
              esModule:false
          }
       }
  ]  
},
//第二种情况：
{
    test:/\.html$/,
//html-loader:处理html中<img>标签引入的图片,然后由url-loader解析
//需要安装html-loader
    loader:'html-loader'
}

关于name:'img/[name].[hash:8].[ext]'的说明。
img：所有图片都打包到img文件夹下
name：获取图片原来的名字，放在该位置
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext：使用图片原来的扩展名

打包其它资源(开发环境下打包)
除css/js/html文件外的其它资源，比如字体图标。

{
exclude:/\.(css|js|html|less|jpg|png|jpeg|gif)$/,//打包其它资源
use:[
    {
        loader:'file-loader',
        options:{
            name:'other/[hash:8].[ext]'
        }
    }  
   ]
}

报错：Refusing to install package with name "webpack" under a package
原因：npm init初始化的时候把包的名字设置成了webpack，导致和webpack这个包的名字一样，报错。所以初始化的时候不要命名成webpack。
https://www.bilibili.com/video/BV1e7411j7T5?p=2