webpack 基础学习

cnpm i webpack webpack-cli -g # 全局安装webpack 和 webpack-cli

webpack ./src/index.js -o ./build/build.js --mode=development

Hash: 6d600b25d47f4727941a
Version: webpack 4.44.1
Time: 45ms
Built at: 2020-09-11 10:10:24
   Asset      Size  Chunks             Chunk Names
build.js  4.83 KiB    main  [emitted]  main
Entrypoint main = build.js
[./src/data.json] 44 bytes {main} [built]
[./src/index.js] 375 bytes {main} [built]

const { resolve } = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        // __dirname是node.js的一个变量，指当前文件目录的绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
        ]
    },
    // plugins配置
    plugins: [
    ],
    // 模式
    mode: 'development'
}

{
  // 匹配哪些文件（使用正则表达式）
  test: /\.css$/,
  // 使用哪些loader进行处理
  use: [
    // 执行顺序：从右到左，从下到上
    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
    'style-loader',
    // 将css文件变成commonjs模块加载到js中，里面是样式字符串
    'css-loader'
  ]
}

use: [
  'style-loader',
  'css-loader',
  'less-loader'
]

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  // 创建一个空HTML文件，引入打包输出的所有资源（JS/CSS）
  new HtmlWebpackPlugin({
    // 复制./src/index.html文件，并自动引入打包输出的所有资源（JS/CSS）
    template: './src/index.html'
  })
],

{
  test: /\.(png|jpg|gif)$/,
  // 如果只使用一个loader，不必使用use数组，只需使用loader属性
  // 需要下载url-loader, file-loader 因为url-loader是依赖file-loader的
  // 问题：默认处理不了html中的img
  loader: 'url-loader',
  options: {
    // 图片小于8kb，就会被base64处理
    // 优点：减少请求数量（减轻服务器压力）
    // 缺点：图片体积会更大（文件请求速度更慢）
    limit: 8 * 1024,
    // 给图片重命名
    // [hash:10]: 图片hash的前10位
    // [ext]: 图片原扩展名
    name: '[hash:10].[ext]'
  }
}

(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAk1BMVEX///8NJjYAGy4AITIJJDQAHS8AHzEAFSoAABsAACAAAB4AFCkAECcACyRtdn0AGCzy8/QABiIAABj19vfZ3N7k5+nd4OLz9PWiqa7N0dRxe4Pr7e61 ...

{
  test: /\.html$/,
  // 引入html中的img图片，从而可以让url-loader进行处理
  loader: 'html-loader',
}

// 打包其他资源（js/css/html以外的资源）
{
  // exclude: 排除js/css/html资源
  exclude: /\.(js|css|html)$/,
  loader: 'file-loader'
}

// 开发服务器 devServer: 用来自动化（自动编译、打开浏览器、刷新浏览器）
// 特点：只会在内存中编译打包，不会有任何输出（即使没有build目录也可以）
devServer: {
  // 构建后的项目路径
  contentBase: resolve(__dirname, 'build'),
  // 启动gzip压缩
  compress: true,
  port: 4000,
  // 自动打开浏览器
  open: true
}

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          // postcss的插件，帮助postcss找到package.json的browserslist里面的配置，通过配置加载指定的css兼容性样式
          require('postcss-preset-env')()
        ]
      }
    }
  ]
}

"browserslist": {
  // 默认是生成环境（production），若要使用开发环境，需在webpack.config.js中设置node环境变量：
  // process.env.NODE_ENV = development
  "development": [
    // 开发环境的目标：可以运行即可
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  "production": [
    // 生产环境的目标：满足绝大多是浏览器的兼容
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

plugins: [
  ...
  // 压缩CSS
  new OptimizeCssAssetsWebpackPlugin()
],

cnpm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -S

"eslintConfig": {
  // // 继承airbnb的风格规范
  "extends": "airbnb-base",
  "env": {
    // 可以使用浏览器中的全局变量（如可以使用window）
    "browser": true
  }
}

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'eslint-loader',
  options: {
    // 自动修复
    fix: true
}

7:1  warning  Unexpected console statement  no-console

// eslint-disable-next-line
console.log(add(2, 3));

babel-loader @babel/core @babel/preset-env

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    // 预设：指示babel做怎样的兼容性处理
    presets: [
      [
        '@babel/preset-env',
        {
          // 按需加载
          useBuiltIns: 'usage',
          // 指定core-js版本
          corejs: {
            version: 3
          },
          // 指定兼容性做到哪个版本的浏览器
          targets: {
            chrome: '60',
            firefox: '60',
            ie: '9',
            safari: '10',
            edge: '17'
          }
        }
      ]
    ]
  }
}

new HtmlWebpackPlugin({
  template: './src/index.html',
  minify: {
    // 移除空格
    collapseWhitespace: true,
    // 移除注释
    removeComments: true
  }
})

{
  test: /\.html$/,
  loader: 'html-loader',
  options: {
    minimize: true
  }
}

devServer: {
  contentBase: resolve(__dirname, 'build'),
  compress: true,
  port: 4000,
  open: true,
  // 开启HMR功能
  // 注意：新配置若要生效，必需重启webpack服务
  hot: true
}

devtool: '[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map'

rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    // 优先执行
    enforce: 'pre',
    loader: 'eslint-loader',
    options: {
      fix: true
    }
  }
  {
    oneOf: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      }
      ...
    ]
  }
]

"sideEffects": [
  "./src/some-side-effectful-file.js"
]

entry: {
  main: './src/js/index.js',
  test: './src/js/test.js'
},
output: {
  // [name]：文件名（entry中的入口名称 ）main、test
  filename: 'js/[name].[contenthash:10].js',
  path: resolve(__dirname, 'build')
},

Built at: 2020-09-13 14:46:20
                Asset        Size  Chunks                         Chunk Names
           index.html   285 bytes          [emitted]
js/main.e68ef89e6d.js  1020 bytes       0  [emitted] [immutable]  main
js/test.5f4037a072.js    1.05 KiB       1  [emitted] [immutable]  test
Entrypoint main = js/main.e68ef89e6d.js
Entrypoint test = js/test.5f4037a072.js
[0] ./src/js/index.js 184 bytes {0} [built]
[1] ./src/js/test.js 94 bytes {1} [built]

optimization: {
  splitChunks: {
    chunks: 'all'
  }
},

import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    console.log('文件加载成功');
    // eslint-disable-next-line
    console.log(mul(2, 3));
    console.log(count(2, 3));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败')
  })

document.getElementById('btn').onclick = function() {
  // 将import的内容放在异步回调函数中使用，点击按钮，test.js才会被加载(不会重复加载)
  // webpackPrefetch: true表示开启预加载
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
  import('./test').then(({ mul }) => {
    console.log(mul(2, 5))
  })
};

new WorkboxWebpackPlugin.GenerateSW({
  /*
    1. 帮助serviceworker快速启动
    2. 删除旧的 serviceworker

    生成一个 serviceworker 配置文件
  */
  clientsClaim: true,
  skipWaiting: true
})

/*
  1. eslint不认识 window、navigator全局变量
    解决：需要修改package.json中eslintConfig配置
    "env": {
      "browser": true // 支持浏览器端全局变量
    }
  2. sw代码必须运行在服务器上
    --> nodejs
    或-->
      npm i serve -g
      serve -s build 启动服务器，将打包输出的build目录下所有资源作为静态资源暴露出去
*/
if ('serviceWorker' in navigator) { // 处理兼容性问题
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js') // 注册serviceWorker
      .then(() => {
        console.log('sw注册成功了~');
      })
      .catch(() => {
        console.log('sw注册失败了~');
      });
  });
}

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: [
     /*
     * 启动的线程数默认为：CPU核数 - 1
     * 可以使用options中的workers属性自定义线程数
     */
    {
      loader: 'thread-loader',
      options: {
        workers: 2
      }
    },
    {
      loader: 'babel-loader',
      options: {
        ...
      }
    }
  ]

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

externals: {
  // 拒绝jQuery被打包进来
  jquery: 'jQuery',
}

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    // 最终打包生成的[name] --> jquery
    // ['jquery'] --> 要打包的库是jquery
    jquery: ['jquery'],
  },
  output: {
    filename: '[name].js', // jquery.js
    path: resolve(__dirname, 'dll'),
    library: '[name]_[hash:10]', // 打包的库里面向外暴露出去的内容叫什么名字
  },
  plugins: [
    // 打包生成一个 manifest.json --> 提供和jquery的映射
    new webpack.DllPlugin({
      name: '[name]_[hash:10]', // 映射库的暴露的内容名称
      path: resolve(__dirname, 'dll/manifest.json'), // 输出文件路径
    }),
  ],
  mode: 'production'
};

webpack --config webpack.dll.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 告诉webpack哪些库不参与打包，同时使用名称也得变
        new webpack.DllReferencePlugin({
            manifest: resolve(__dirname, 'dll/manifest.json')
        }),
        // 将某个文件打包输出出去，并在html中自动引入该文件
        // ps: 其实在html中手动引入js也可以，但是没有这种自动引入的方式方便
        new AddAssetHtmlWebpackPlugin({
            filepath: resolve(__dirname, 'dll/jquery.js')
        })
    ],
    mode: 'production'
}

output: {
  // 文件名称：指定名称 + 目录
  filename: 'js/[name].js',
  // 输出文件目录（将来所有资源输出的公共目录）
  path: resolve(__dirname, 'build'),
  // 所有资源引入的公共路径前缀：'images/a.jpg' → '/images/a.jpg
  // 若使用下一行的配置，html文件中引入js的路径则为 '/js/index.js'
  // 一般用于生产环境
  // publicPath: '/'

  // 非入口chunk的名称
  // 例1：通过import()函数的方式单独打包的chunk
  // 例2：通过optimization 将 node_modules 中的模块单独作为chunk
  // 这里的 [name] 其实是id命名
  chunkFilename: 'js/[name]_chunk.js',

  // 整个库向外暴露的变量名 （常配合dll使用）
  // library: '[name]',
  // 变量名添加到什么上
  // libraryTarget: 'window', // browser
  // libraryTarget: 'global', // node
  // libraryTarget: 'commonjs'
}

module: {
  rules: [
    // loader配置
    {
      test: /\.css$/,
      // 多个loader用use
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.js$/,

      // 排除node_modules下的js文件
      exclude: /node_modules/,

      // 只检查src下的js文件
      include: resolve(__dirname, 'src'),

      // 优先执行
      ecforce: 'pre',
      // 延后执行
      // enforce: 'post',

      // 单个loader用loader
      loader: 'eslint-loader',
      options: {}
    },
    {
      // 以下配置只会生效一个
      oneOf: [

      ]
    }
  ]
}

// 解析模块的规则
resolve: {
  // 配置解析模块的路径别名: 优点 简写路径，缺点 路径没有提示
  alias: {
    $css: resolve(__dirname, 'src/css')
  },

  // 配置省略文件路径后缀名（这种写法需要注意文件重名问题）
  extensions: ['.js', '.json', '.css','jsx'], // 默认值为 ['.js', '.json']

  // 告诉 webpack 解析模块是去找哪个目录
  modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] // 默认为['node_modules']
}

// 用于开发环境
devServer: {
  // 运行代码的目录
  contentBase: resolve(__dirname, 'build'),
  // 监视 contentBase 目录下的所有文件，一旦文件发生变化就会 reload
  watchContentBase: true,
  watchOptions: {
    // 忽略文件
    ignored: /node_modules/
  },
  // 启动gzip压缩
  compress: true,
  // 端口号
  port: 4000,
  // 域名
  host: 'localhost',
  // 自动打开浏览器
  open: true,
  // 开启HMR功能
  hot: true,
  // 不显示启动服务器日志信息
  clientLogLevel: 'none',
  // 除了一些基本的启动信息以外，其他内容都不要显示
  quiet: true,
  // 如果出现错误，不要全屏提示
  overlay: false,
  // 服务器代理 --> 解决开发环境跨域问题
  proxy: {
    // 一旦devServer(4000)服务器接收到 /api/xxx 的请求，就会把请求转发到另外一个服务器(8080)
    '/api': {
      target: 'http://localhost:8080',
      // 发送请求时，请求路径重写： /api/xxx -> /xxx  （去掉/api）
      pathRewrite: {
        '^api': ''
      }
    }
  }
}

optimization: {
  splitChunks: {
    chunks: 'all',
    // 默认值，可以不写，一般不用修改
    /*minSize: 30 * 1024, // 分割的chunk最小为30KB
    maxSize: 0, // 最大没有限制
    minChunks: 1, // 要提取的chunks最少被引用1次，
    maxAsyncRequests: 5, // 按需加载的时候并行加载的文件的最大数量
    maxInitialRequests: 3, // 入口js文件最大并行请求数量
    automaticNameDelimiter: '~', // 名称连接符
    name: true, // 可以使用命名规则
    cacheGroup: { // 分割chunk的组
      // node_modules中的文件会被打包到 vendors 的chunk中 --> vendors~xxx.js
      // 满足上面的公共规则，如：大小超过30KB，至少被引用一次
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        // 优先级
        priority: -10
      },
      default: { // 默认组
        // 要提取的chunks最少被引用2次（覆盖掉上面的minChunks的值）
        minChunks: 2,
        priority: -20,
        // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
        reuseExistingChunk: true
      }
    }
  } */
  },
  // 由于前面的chunkFilename使用了contenthash，所以a.js更改时其文件名会改变。因为index.js中引入了a.js文件，所以打包后的
  // index.js中记录了a.js的contenthash，因此a.js的改变会致使index.js的重新打包，
  // 为了避免这种情况，我们需要将index.js记录其它模块的部分单独打包

  // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
  runtimeChunk: {
    name: entrypoint => `runtime-${entrypoint.name}`
  },
  minimizer: [
    // 配置生产环境的压缩方案：js和css
    // webpack版本升级到4.26以上时，压缩js就是不用uglifyjs而是terser了
    new TerserWebpackPlugin({
      cache: true, // 开启缓存
      parallel: true, // 开启多进程打包
      sourceMap: true, // 启用source-map
    })
  ]
}

npm install webpack@next webpack-cli -D