webpack4.0学习笔记

webpack

是一个用于现代 JavaScript 应用程序的——静态模块打包工具。
打包后将项目所需模块生成一个或多个bundle文件。

入口

指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始，进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
默认值是 ./src/index.js，可在webpack configuration中配置entry属性。
可指定一个或者多个不同的入口起点。（使用多个入口也可起到项目优化作用）

// 单个入口
module.exports = {
  entry: './src/main.js',
};
// 多个入口
module.exports = {
  entry: ['./src/main.js','./src/index.js'],
};
// 对象的形式 用于分离app和verdor(第三方库)入口
module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js', // 第三方库
  },
};

注： webpack 4 使用 optimization.splitChunks 选项，将 vendor 和 app(应用程序) 模块分开，并为其创建一个单独的文件。

输出（output）

告知打包后保存的路径；
只能指定一个路径

module.exports = {
  output: {
    path: '../dist',
    filename: '[name].[hash:8].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? '/'
      : './'
  },
};

注：publicPath的作用：打包后的静态文件路径修改

loader

webpack默认只能打包处理以.js后缀名结尾的模块；其他文件打包需要各类loader
处理css文件：css-loader 再通过style-loader转换 最后生成app.xxxx.css
处理typescript文件：ts-loader
处理vue文件：vue-loader
处理静态资源中带有url路径文件：url-loader；将图片打包成base64
例：打包图片可使用file-loader或url-loader可对图片进行打包操作；不过url-loader可做图片大小限制，将小于限制的图片转成base64编码，默认将所有图片转成base64

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};
const path = require('path')
module: {
  rules: [
    { test: /\.css$/, use: 'css-loader' },
    { test: /\.ts$/, use: 'ts-loader' },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: { // 配置项
        limit: 10000, // 将小于约10kb的图片用base64编码；就不需要http请求了；如果图片太大就不推荐了
        name: path.posix.join('static','img/[name].[contenthash:8].[ext]')
      }
    },
    {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: path.posix.join('static', 'media/[name].[contenthash:8].[ext]') //以 posix 兼容的方式交互
      }
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: path.posix.join('static', 'fonts/[name].[contenthash:8].[ext]')
      }
    }
  ]
},

注：在option中可以配置include；可以指定在哪个文件夹里面的图片进行url-loader转换，不然会全局搜索
loader 遵循标准 模块解析 规则。多数情况下，loader 将从 模块路径 加载（通常是从 npm install, node_modules 进行加载）。

插件 plugin

作用：解决loader无法实现的事

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  plugins: [
    new webpack.ProgressPlugin(), //用于自定义编译过程中的进度报告
    new HtmlWebpackPlugin({ template: './src/index.html' }), //生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。
  ],
};