概念

webpack 是一个基于 NodeJS 开发的静态模块打包工具，

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图( dependency graph )，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

代码构建是前端工程化，自动化的体现，把一系列的构建流程由代码去自动实现，提高生产效率，包括如下内容：

代码转换：TS 编译 JS ，SCSS 编译 CSS 等
文件优化：压缩 js , css , html, 压缩合并图片等
代码分割：提取多个页面的公共代码，提取首屏不需要执行的代码让其异步加载
模块合并
自动刷新：监听本地源码的变化，自动重新构建，刷新浏览器
代码校验
自动发布：更新完代码后自动构建上线代码

安装 webpack

同时安装 webpack 和 webpack-cli 到开发依赖 devDependencies 中，两种方式效果相同

powershell

npm i webpack webpack-cli --save-d
npm i webpack webpack-ci -D

webpack.config.js 配置

webpack 使用时必须要先写配置文件 webpack.config.js

入口（entry）

入口（entry）表示使用哪个 js 文件作为构建内部依赖的开始，从入口文件开始寻找相关依赖。

可以设置单入口或多入口

出口（output）

出口（output）表示最后输出的文件，只能指定一个输出配置

需要设置 output 的 filename 和 path，为了清理缓存 filename 可以加入hash 后缀， path 指定的打包路径必须为绝对路径，需要使用 Node.js 的 path 模块

javascript

let path  = require('path') // 引入 Node.js 内置 path 模块

module.exports = {
    entry: './src/index.js',
    output: {
        filname: 'build.[hash:8].js', // 文件名添加8位哈希后缀
        path: path.resolve('./build') // 使用绝对路径
    }
}

模式（mode）

选择生产模式（production）还是开发模式（development），生产模式会把代码压缩成一行，开发模式有响应的注释，可读性好

loader

webpack默认只能打包处理 Js 类型的文件，无法处理其它类型的文件

如果要处理非 Js 类型的文件，需要安装一些合适 loader 加载器

loader 重要特性：

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行
插件（plugin）可以对 loader 进行拓展

常见的 loader:

css-loader ：加载 css 模块
style-loader ：把 css 变成 <style> 标签插入到 HTML 里
less-loader ：加载 less 模块为 css 模块

模块（module）

module 中用来配置模块加载方式，会对指定后缀的文件按顺序使用一系列的 loader

使用 loader 的顺序是倒叙的

javascript

module.exports = {
    module: {
        rules: [ // 从右往左写
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'}, 
                    {loader: 'css-loader'}
                ]
            },
            {
                test: /\.less$/,
                use:[
                    {loader: 'style-loader'}, 
                    {loader: 'css-loader'},
                    {loader: 'less-loader'}
                ]
            }
        ]
    }
}

对所有后缀为.css的文件使用 css-loader 加载，然后使用 style-loader 加载变为 <script>标签

对所有后缀为.less的文件使用 less-loader加载变为 css，然后使用 css-loader 加载，然后使用 style-loader 加载变为 <script>标签

插件（plugins）

插件可以拓展 webpack 的功能，进行代码压缩优化等，webpack 内置了一些插件，大部分需要安装

插件一般是 Class ，使用一个插件需要安装后 require 引入，使用 new 操作符创建一个自定义实例（可以传参 option），然后添加到配置文件的 plugins 数组中

常用插件：

html-webpack-plugin: 将 html 打包到 build 文件夹下，并且可以引入打包的 js

javascript

let webpack = require('wepack') // 引入 webpack 内部插件
let HtmlWebpackPlugin = require('html-webpack-plugin') // 安装插件

module.exports = {
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html',
            hash: ture,
            filename: 'index.html',
            minify:{
                removeAttributeQuotes: true, // 删除双引号
                collapseWhitespace: true, // 删除空格
            }
        })
    ]
}

clean-webpack-plugin: 每次打包时清空打包目录文件夹，避免文件堆叠

javascript

let { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  plugins:[
    new CleanWebpackPlugin(['./dist'])// 可以不写，默认打包目录；也可以用字符串或者数组
  ]
}

copy-webpack-plugin: 拷贝文件

javascript

let CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  plugins:[
    new CopyWebpackPlugin([ // 多个拷贝参数设置数组
      {from: './doc',to: './'} // 拷贝到打包目录dist
    ]), 
  ]
}

webpack.BannerPlugin (webpack 内置插件) : 在打包的文件开头添加注释声明

javascript

  let webpack = require('webpack')

module.exports = {
	new webpack.BannerPlugin('make 2020 by wy')
}

dev-server

安装 webpack-dev-server 然后配置 dev-server 可以配置开发服务器，在内存中打包文件，相当于使用打包出来的文件直接开一个服务器用来配合开发

首先安装 webpack-dev-server

javascript

npm i webpack-dev-server -D

然后设置 package.json 中的 scripts 属性添加运行服务器的命令

"scripts":{
    "dev": "webpack-dev-server"
}

然后设置 webpack.config.js 的 dev-server 属性

javascript

module.exports = {
    devServer: {
        contentBase: './build', 
        port: 3000,
        compress: true,
        open: true,
        hot: ture
    }
}

contentBase : 指定项目启动后的主页面
compress : 进行服务器压缩
open : 项目启动后自动打开浏览器
hot : 启动热更行，可以不刷新页面更新代码

watch 监控打包

配置 watch 和 watchOptions 可以开启实时监控打包

javascript

module.exports = {
  watch: true,
  watchOptions: {
    poll: 1000 , // 每秒询问1000次
    aggregateTimeout: 500, // 防抖500ms
    ignored: /node_modules/ // 忽略监控的文件
  }
}