Webpack学习笔记——基本概念

概念

笔记对应的版本为 webpackv4.43.0

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。

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

webpack从4.x版本开始，可以零配置使用，但是依然可以进行自定义配置。

webpack有四个核心概念：

入口（entry）
输出（output）
loader
插件（plugins）

一、入口（entry）

入口起点（entry point）指示webpack应该使用哪个模块作为构建内部依赖的开始。

进入入口起点后webpack会找出文件对应的以来关系，然后进行处理，最后输出到出口文件中，默认为bundles。

入口配置

通过在webpack配置文件中配置entry属性，指定一个或多个入口起点，默认是值为./src。

常见的配置文件为：webpack.config.js

Vue-cli3.x中配置文件是vue.confing.js的自定义文件，vue脚手架会自己查找该文件，根据文件中的配置内容对默认配置进行修改

最简单的entry配置举例：

// webpack.config.js

module.exports = {
    entry: './src/myentry.js'
}

1、单个入口语法

用法： entry: string|Array<string>

// 上面的例子其实是下面语法的简写

module.exports = {
    entry: {
        main: './src/myentry.js'
    }
}

2、对象语法

用法： entry: {[entryChunkName: string]: string|Array<string>}

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
};

module.exports = config;

3、常见场景

常见的入口配置及实际应用

3.1、分离应用程序（app）和第三方库（vendor）入口

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
};
module.exports = config;

// 如上写法，看出webpack从app.js和vendors.js开始创建依赖。两者之间是彼此完全分离、相互独立的。常见于，只有一个入口起点（不包含vendor）的单页应用程序中

// 如此设置允许使用 CommonsChunkPlugin从应用程序bundle中提取vendor引用到vendor bundle并把引用vendor的部分替换为__webpack_require__()调用。如果应用程序bundle中没有vendor代码。就可以在webpack中实现长效缓存模式

3.2、多页面应用程序

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
}

module.exports = config;
// 告诉webpack需要3个独立的依赖图

// 在多页应用中，每当页面跳转时服务器将获取一个新的HTML文档。页面重新加载新文档，并且资源被重新下载。
 // 使用CommonsChunkPlugin为每个页面间的应用程序共享代码创建bundle，使多页应用能狗狗复用入口起点之间的大量代码/模块

二、出口（output）

output属性告诉webpack输出其所创建的bundles的位置，以及文件命名，默认值为./dist。

// webpack是依赖于nodejs的环境运行，该获取路径的方法为nodejs自带的默认方法，所以直接require调用即可
const path = require('path')  

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),  // 输出的路径
        filename: 'mybundle.js'  // 输出的文件名
    }
}

1、用法

webpack中配置output属性的最低要求是将它的值设置为一个对象，并包含以下两点：

filenam用于输出文件的文件名
目标输出目录path的绝对路径

// 生成一个bundle.js文件到/src/dist目录中

const config = {
    output: {
        filename: 'bundle.js',
        path: '/src/dist'
    }
};

module.exports = config;

2、多个入口起点

如果配置创建两个多个入口起点或者使用了CommonsChunkPlugin的插件时，应该使用占位符来确保每个文件名的唯一性

const config = {
    entry: {
        app: './src/app.js',
        app2: './src/app2.js'
    },
    output: {
        filenname: '[name].js',
        path: __dirname + '/dist'
    }
};

module.exports = config;

// 输出结果为： ./dist/app.js ./dist/app2/js

3、高级进阶（待深究）

使用CDN和资源hash的情况

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 __webpack_public_path__。

__webpack_public_path__ = myRuntimePublicPath

// 剩余的应用程序入口

三、loader

用来处理非JavaScript文件，将所有类型文件转换为webpack能够给处理的有效模块，类似于gulp中的任务（task）。

注意，loader 能够 import 导入任何类型的模块（例如.css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。

loader包含两个东西：

test属性，用于标识出应该被对应的loader进行转换的某个或某些文件
use属性，表示进行转换时，应该使用的loader

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
    // loader定义在module.rules中
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

1、使用loader

如果要使用loader必须要先安装对应的loader，通过npm的方式进行安装

// 例如
npm install --save-dev css-loader
npm install --save-dev ts-loader

相关的loader在使用时可以在官网查找，loaders

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

loader的使用常见的有三种方式：

配置（官方推荐）：在config文件中指定loader
内联：通过import语句显式指定
CLI：在shell命令中指定

1.1、配置

在配置文件中通过module.rules指定多个loader，loader的执行顺序为，从右向左/从下向上

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

1.2、内联

在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

1.3、CLI

通过 CLI 使用 loader

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

2、loader特性

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
loader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。

插件

插件和loader的不同点在于，插件可以执行范围更广的任务，从打包优化到压缩，一直到重新定义环境中的变量，是web pack的支柱功能。插件的目的在于解决loader无法实现的其他事。

常见的插件使用方式：

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

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

插件的实质是一个具有apply属性的JavaScript对象。apply属性会被webpack compiler调用，并且compiler对象可在整个编译生命周期访问。

用法

由于插件可以携带参数/选项，所以必须在配置中向piugins属性传入new实例

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

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

模式

通过选择 development 或 production 之中的一个，来设置 mode 参数，可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

从CLI参数中传递

webpack --mode=production

选项	描述
`development`	会将 `process.env.NODE_ENV` 的值设为 `development`。启用 `NamedChunksPlugin` 和 `NamedModulesPlugin`。
`production`	会将 `process.env.NODE_ENV` 的值设为 `production`。启用 `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin`, `OccurrenceOrderPlugin`, `SideEffectsFlagPlugin` 和 `UglifyJsPlugin`.

记住，只设置 NODE_ENV，则不会自动设置 mode。

mode: development

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

mode: production

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

posted @ 2020-06-04 09:39 Bradleyu 阅读(181) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

二掌柜的包袱斋

读书人？剑客？游侠？

Webpack学习笔记——基本概念

概念

一、入口（entry）

入口配置

1、单个入口语法

2、对象语法

3、常见场景

3.1、分离应用程序（app）和第三方库（vendor）入口

3.2、多页面应用程序

二、出口（output）

1、用法

2、多个入口起点

3、高级进阶（待深究）

三、loader

1、使用loader

1.1、配置

1.2、内联

1.3、CLI

2、loader特性

插件

用法

模式

mode: development

mode: production

公告

二掌柜的包袱斋

读书人？剑客？游侠？

Webpack学习笔记——基本概念

概念

一、入口（entry）

入口配置

1、单个入口语法

2、对象语法

3、常见场景

3.1、分离应用程序（app）和第三方库（vendor）入口

3.2、多页面应用程序

二、出口（output）

1、用法

2、多个入口起点

3、高级进阶 （待深究）

三、loader

1、使用loader

1.1、配置

1.2、内联

1.3、CLI

2、loader特性

插件

用法

模式

mode: development

mode: production

公告

3、高级进阶（待深究）