webpack系列文章之入门篇

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

图片引用webpack菜鸟教程

安装

新建文件夹后

1. npm init 初始化
2. npm install webpack webpack-cli -d 安装 webpack 和 weback-cli
3. 创建src文件夹
4. 创建在命令行中默认的index.js文件
5. npx webpack
   注释： 有点同学会直接用webpack开头执行命令出现报错，是因为需要将webpack全局安装，但是不建议全局安装，因为版本不同，可能有些功能就不支持，这里的npx是npm下面的一个分支，因为npm是全局安装，故npx不会报错。

解析执行命令后的终端

终端图片

1. hash: 每次打包后都会生成一个hash值，在没有任何配置的时候，这个hash是一个全局hash，就是所有文件共用这一个hash值，当任意用到hash值的文件内容发生变化的时候，打包的时候hash值都会发生改变，如果没有内容改变，则hash值不变
2. Version: 当前安装webpack的版本号
3. Time: 打包构建时间
4. Built: 这里面有四个参数
   Asset: 构建后的入口文件
   Size: 项目构建后的尺寸
   Chunks: 这里的chunks是chunk的集合，如果mode模式是production模式，则这里的名字为为空，因为没有命名所以以模块id命名，development模式下则是具体的根据Asset命名
   Chunk Names: 每个chunk的文件名

配置文件

webpack启动的时候默认走 webpack.config.js 文件

webpack基本组成

1. entry： 执行构建的入口文件
2. output: 执行构建后的文件存放位置以及名称
3. mode：执行构建的模式，有三种模式：none && production && development
4. bundle: 执行构建后的文件本身
5. chunk：执行构建后的文件里面的代码片段
6. module： 模块化
7. loader：webpack对于前端只支持.js/.json两种后缀文件，所以其他后缀名的文件需要引入相应的loader进行处理
8. plugin：webpack的能力拓展，当webpack解决不了，则通过plugin引入插件

entry

执行构建的入口文件
支持字符串、对象两种格式

entry: './src/index.js', // 字符串

entry: { // 对象
    index: './src/index.js'
}

如果是多文件入口，这里可以这样写：

entry: { // 对象
    index: './src/index.js',
    list: './src/list.js'
},

output

执行构建后的文件存放位置以及名称，为对象格式
path：执行构建后的资源存放位置，必须为绝对路径
filename: 执行构建后的名称，如果是多文件入口，则为[name].js
[name].js为webpack的占位符，具体可参考webpack官网占位符

output: {
    path: path.resolve(__dirname, "./dist"),
  // path: '/dist'
    filename: 'index.js'
  // filename: [name].js
},

mode

执行构建的模式
webpack有三种模式： none，development，production
production: 生产模式，默认会启动代码压缩
development: 开发模式，默认不会启动代码压缩，方便开发的时候定位代码

mode: 'production'

plugin

plugin是webpack的能力拓展，当webpack解决不了，则通过移入plugin的方式解决

举例1：html模板解析

需要引入html-webpack-plugin插件
安装： npm install html-webpack-plugin
注： 这里的定义为一个类函数，所以使用的时候，需要先实例化

const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',  // 找到入口文件
      filename: 'index.html'  // 执行构建后的文件名
    })
  ]
}

如果是多文件入口，则plugin实例化多次，同时入口entry配置为多文件入口

const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: { // 对象
    index: './src/index.js',
    list: './src/list.js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',  // 找到入口文件
      filename: 'index.html'  // 执行构建后的文件名
    }),
    new htmlWebpackPlugin({
      template: './src/list.html',  // 找到入口文件
      filename: 'list.html'  // 执行构建后的文件名
    })
  ]
}

其中，构建后的每个html默认引入当前所有的js文件，那么，如果我们只想引入某个js, css怎么做呢？
借助chunks参数，设置该html依赖的js, css

const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: { // 对象
    index: './src/index.js',
    list: './src/list.js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',  // 找到入口文件
      filename: 'index.html',  // 执行构建后的文件名
      chunks: ['index'] // 只引入index相应的.js, .css
    }),
    new htmlWebpackPlugin({
      template: './src/list.html',  // 找到入口文件
      filename: 'list.html',  // 执行构建后的文件名
      chunks: ['list'] // 只引入list相应的.js, .css
    })
  ]
}

loader

webpack对于前端来说，只支持.js、.json文件，换言而之，只能找对.js.json的后缀名文件进行处理，其他后缀名文件webpack不能识别，这个时候就需要用到loader来告诉webpack遇到的是哪些类型的文件，应该怎么处理。

举例1： .css文件

支持.css文件需要安装的loader有： css-loader, style-loader
安装： npm install css-loader && npm install style-loader
css-loader：这个loader作用非常单一, 只做了一件事，把css以js的方式放在了bundlewen文件里
style-loader: 这个loader就是把css以style的形式添加到页面上
注： 这里的use为数组的时候，有执行顺序，并且顺序为
use使⽤⼀个loader可以⽤对象，字符串，两个loader需要⽤数组

  module: { // 允许在 webpack 配置中指定多个 loader
   rules: [
     {
       test: /\.css$/, // 正则找到相应的css后缀名
       use: ["style-loader", "css-loader"]  // 匹配相应的loader
     }
   ]
  },

最后会以style形式在当前页面引入
（如果想以link形式引入，可以借用extract-text-webpack-plugin将style中的css样式抽离出来）

image.png

举例2： 图片文件

支持图片的loader: file-loader
安装： npm install file-loader

module: { // 允许在 webpack 配置中指定多个 loader
   rules: [
     {
       test: /\.css$/, // 正则找到相应的css后缀名
       use: ["style-loader", "css-loader"]  // 匹配相应的loader
     },
     {
       test: /\.(png)$/, 
       use: 'file-loader'
     }
    
   ]
  },

但是在实际开发中，我们当时不可能只使用这一种格式的图片了，所以还可以这样写：

{
      test: /\.(png|jpg|jpeg|gif)$/, // 正则多种图片格式
      use: 'file-loader'  // 这里默认为hash命名
 }

同时这里的use支持可配置

{
      test: /\.(png|jpg|jpeg|gif)$/, // 正则多种图片格式
      use: {
        loader: 'file-loader', // 匹配相应的loader
        options: {
          name: '[name]_[hash].[ext]', // [name],[ext]都为占位符，为你的文件配置自定义文件名模板，这里如果不使用[hash]，则不显示hash命名，就是普通命名
          outputPath: 'images/', // 构建后的图片存放路径，为自定义
          limit: 2048  //设置⼩于2048，才转换成base64
        }
      }
    }

chunk

简而言之，就是一个代码片段。一个文件中引入其他的依赖包，比如：index.js里面引入了index.css，common.js，打包构建后,打包生成的 index.css 和 index.js 都属于 chunk 0, 这是属于一个chunk，具体参考博客：webpack 中那些最易混淆的 5 个知识点

引用上面链接中博客图片

bundle

简而言之，就是文件本身，chunk是bundle里面的代码片段，两者关系是一对一的包含关系，但是，有些配置不会产生一对一的关系。比如上图中： 使用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。则chunk0对应两个bundle文件