webpack学习之基本概念

基本概念

• Webpack 是什么
  本质上，Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。

• 模块化
  模块是指为了完成某功能所需的程序或者子程序，模块是系统中「职责单一」且「可替换」的部分。所谓的模块化就是指把系统代码分为一系列职责单一且可替换的模块。模块化开发是指如何开发新的模块和复用已有的模块来实现应用的功能。

• 模块的维护和使用方式目前分为三种

  • CommonJS是NodeJS中广泛使用的模块化规范，是一种同步加载模块依赖的方式

    • require引入一个模块
    • exports / modle.exports导出一个模块
    • module导出的内容可以理解为模块文件本身

  • AMD是JS模块加载库RequireJS提出并且完善的一套模块加载规范

  • ES6

    • import导入模块
    • export导出模块

  • UMD兼容 CommonJS 和 AMD 一套规范目前多数模块的封装，既可以在 Node.js 环境又可以在 Web 环境运行，所以一般会采用 UMD 的规范

  • NPM Scripts
    用于执行指定脚本，供npm调用，如下实例。

scripts: {
"start": "webpack --config webpack.config.dev.js"
}
``
-常见名词解释
|参数
| 说明 |
|entry| 项目入口文件|
|module
| 开发中每一个文件都恶意看做一个module, 模块不局限与js，css、图片等都是模块
|
|chunk | 代码块，一个chunk可以由多个模块组成|
|loader| 模块转换器，对模块进行转化处理|
|plugin| 扩展插件，可以完成loader完不成的工作|
|bundle | 最终打包完成的文件，一般与chunk一一对应bundle 就是对 chunk 进行便意压缩打包等处理后的产出|
- output配置
- filename
- path
```javascript
module.exports = {
entry: {
home: 'path/to/my/entry/home.js',
search: 'path/to/my/entry/search.js',
list: 'path/to/my/entry/list.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
};

• resolve
  通过对resolve选项的配置可以帮助webpack快速的查找依赖
  • alias：通过设置 alias 可以帮助 webpack 更快查找模块依赖，精简代码书写时相对路径的书写；
  • extensions: 可以省略解析扩展名的配置，配置太多反而会导致webpack 解析效率下降；

module.exports = {
resolve: {
resolve: ['.js', '.css', '.jsx']
alias: {
src: path.resolve(__dirname, 'src'),
'@lib': path.resolve(__dirname, 'src/lib')
}
}
};

• module
  在webpack解析模块的同时，不同的文件需要用不同的模块处理器处理。module中有两个主要配置module.noParse和module.rules
  • module.noParse：可以让webpack忽略对部分没有采用模块化的文件的递归解析和处理，以提高构建性能。控制不解析哪些文件

module.exports = {
module: {
// 使用正则表达式
noParse: /jquery|lodash/
// 使用函数，从 Webpack 3.0.0 开始支持
noParse: (content) => {
// content 代表一个模块的文件路径
// 返回 true or false
return /jquery|lodash/.test(content);
}
}
}

与之对应的是parser选项，以更细粒度的方式控制模块不会被处理。

module: {
rules: [{
test: /.js$/,
use: ['babel-loader'],
parser: {
amd: false, // 禁用 AMD
commonjs: false, // 禁用 CommonJS
system: false, // 禁用 SystemJS
harmony: false, // 禁用 ES6 import/export
requireInclude: false, // 禁用 require.include
requireEnsure: false, // 禁用 require.ensure
requireContext: false, // 禁用 require.context
browserify: false, // 禁用 browserify
requireJs: false, // 禁用 requirejs
}
}]
}

• module.rules
  module.rules是在处理模块时，将符合规则条件的模块，提交给对应的处理器来处理，通常用来配置 loader，其类型是一个数组，数组里每一项都描述了如何去处理部分文件。每一项 rule 大致可以由以下三部分组成：
  1. 条件匹配：通过test、include、exclude等配置来命中可以应用规则的模块文件；
  2. 应用规则：对匹配条件通过后的模块，使用use配置项来应用loader，可以应用一个 loader 或者按照从后往前的顺序应用一组 loader，当然我们还可以分别给对应 loader 传入不同参数；
  3. 重置顺序：一组 loader 的执行顺序默认是**从后到前（或者从右到左）**执行，通过enforce选项可以让其中一个 loader 的执行顺序放到最前（pre）或者是最后（post）。

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

use 中传递字符串（如：use: [‘style-loader’]）是 loader 属性的简写方式（如：use: [{loader: ‘style-loader’}]）

• loader传递参数的三中形式

// inline内联写法，通过 query 传入
const html = require("html-loader?attrs[]=img:src&attrs[]=img:data-src!./file.html");
//config内部的写法， 通过options传入
module: {
rules: [
{
test: /.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
removeComments: false,
collapseWhitespace: false
},
//enforce: post 将该loader的执行顺序放到最后
//enforce: pre 将该loader的执行顺序放到最前
enforce: 'post',
}
]
}
]
}
// config内写法，通过 query 传入
module: {
rules: [{
test: /.html$/,
use: [ {
loader: 'html-loader?minimize=true&removeComments=false&collapseWhitespace=false',
}]
}]
}

• 代码分割动态导入
  webpack支持使用import()语法动态导入模块，import()返回一个promise对象

import(
/*
神奇注释语法
webpackLoad: 'true'，
webpackChunkName: 'lasy-name',
webpackPreload: true
*/
'@src/util/lazy_aa'
).then(({default: fn}) => {
return '成sss功'
}).catch(err => {
console.log(err);
})

最后

以上就是彩色芹菜为你收集整理的webpack学习之基本概念的全部内容，希望文章能够帮你解决webpack学习之基本概念所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。