webpack基础知识

webpack4与webpack5的区别

• package.json 的 dev-server 命令改了"dev": "webpack serve --config build/webpack.dev.js"
• 升级新版本const { merge } = require( 'webpack-merge')
• 升级新版本const [ CleanWebpackPlugin } = require('clean-webpack-plugin')
• module.rules中loader: ['xxx-loader'] 换成use: ['xxx-loader']
• filename:'bundle,[contenthash:8].js'其中 h'小写，不能大写

入口(entry)

• SPA单文件入口

  const path = require('path')
  const { srcPath, distPath } = require('./paths')
  module.exprots = {
    entry: path.join('srcPath', 'index.js'), 
    output: {
        filename: 'bundle.[contentHash:8].js'   // 打包代码是，加上hash戳，文件没有变化是hash不会变
    }
  }
  

• 多页面入口

  const path = require('path')
  const { srcPath, distPath } = require('./paths')
  module.exprots = {
    entry: {
        index: path.join('srcPath', 'index.js')
        other: path.joni('srcPath', 'other.js')
    },
    output: {
        filename: '[name].[contentHash:8].js'   // name 即多入口是 entry的名字不重复
    },
    plugins: [
        // 多入口生成 index.html
        new HtmlWebpackPlugin({
            template: path.join('srcPath', 'index.html'),
            filename: 'index.html',
            // chunks 表示引入哪些chunk
            chunks: ['index']   // 只引用index.js
        }),
  
        // 多入口生成 other.html
        new HtmlWebpackPlugin({
            template: path.join('srcPath', 'other.html'),
            filename: 'other.html'
            // chunks 表示引入哪些chunk
            chunks: ['other']   // 只引用other.js
        })
    ]
  }
  

loader

• loader 的执行顺序是：从后到前

module.exprots = {
    module: {
        rules: [
            {
                test: /\.css$/,
                // 执行顺序是从后到前的方式 ‘postcss-loader’是追加前缀
                loader: ['style-loader', 'css-loader', 'postcss-loader']
            }
        ]
    }
}

plugin

• 插件

webapck性能优化

webpack 优化构建速度（用于生产环境）

• 优化 babel-loader
• IgnorePlugin（忽略指定的目录及模块）
• noParse（忽略对指定的模块进行解析和处理）
• happyPack(多进程打包)
• ParallelUglifyPlugin（多进程代码压缩）

webpack 优化构建速度（用于开发环境）

• 自动刷新
• 热更新
• DllPlugin

webpack 优化产出代码

• 小图片 base64 编码
• bundle 加 hash
• 懒加载
• 提取公共代码
• 使用CDN加速
• IgorePlugin
• 使用product
• Scope Hosting

1、优化babel-loader

• 开启cacheDirectory缓存

  {
    test: /\-js$/,
    use：［'babel-loader?cacheDirectory'］，// 开启缓存
    include: path.resolve（__dirname，'src'），// 明确范围// // 排除范围，include 和 exclude 两者选一个即可
    // exclude: path.resolve(_dirname, 'node_modules')
  }
  

IgnorePlugin 避免引入用于模块

• 以Moment.js库为例，只使用中文语言，其他语言不做打包引用

// index.js
import moment from 'moment'
import 'moment/locale/zh-cn' // 手动引用中文包
moment.locale('zh-cn') // 设置中文

// webpack配置文件
module. exports = {
    plugins: [
        // 忽略 moment 下的 /Locale 目录
        new webpack. IgnorePlugin(/\.\/locale/, /moment/)
    ]
}

noParse避免重复打包

    module. exports = {
        module: {
        // 独完整的'react.min.js、文件就没有采用模块化
        // 忽略对 react.min.js、文件的递归解析处理
        noParse: [/react\.minl.js$/]，
        },
    }

IgnorePlugin vs noParse区别

• IgnorePlugin 直接不引入，代码中没有
• noParse 引入，但不打包

happypack 多进程打包

const HappyPack = require('happypack')
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                // 把对•js 文件的处理转交给 id 为 babel 的 `HappyPack` 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath
            }
        ]
    },
    plugins: [
        // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文id：'babel'，
            id: 'babel'
            // 如何处理•js 文件，用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
        })
    ]
}

ParallelUglifyPlugin多进程压缩代码

const HappyPack = require('happypack')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                // 把对•js 文件的处理转交给 id 为 babel 的 `HappyPack` 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath
            }
        ]
    },
    plugins: [
        // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文id：'babel'，
            id: 'babel'
            // 如何处理•js 文件，用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
        }),

        // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJs 的参数
            // 还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false,    // 最紧凑的输出
                    comments: false,    // 删除所有的注释
                },
                compress: {
                    // 删除所有的console、语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })

    ]
}

为何要打包构建

• 体积小（Tree-Shaking、压缩、合并），加载速度快
• 编译高级语言或语法（TS、ES6+、模块化、less/scss）
• 兼容性和错误检查（Polyfill、postcss、eslint）
• 统一、高效的开发环境
• 统一的构建流程和产出标准
• 集成公司构建规范（提测、上线）

module/chunk/bundle的区别

• module - 各个与源码文件，webapck中一切皆为模块
• chunk - 多模块合并成的，如entry、import()、splitChunk
• bundle - 产生最终的文件

loader和plugin的区别

• loader模块转换，如less->css、ES6+ ->ES5、自定义loader功能处理
• plugin 扩展插件、如HtmlWebpackPlugin