webpack系统学习

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack 4.0 的四个核心概念

入口（entry）

输出（output）

loader

插件（plugins）

入口（entry）

是指webpack开始分析文件的起点，可以配置多个，以适配多页面

// 单页面配置

module.exports = {

entry: './path/to/my/entry/file.js'

};

// 多页面配置

moudle.exports = {

entry: {

app: './src/app.js'

vendors: './src/verdors.js'

}

}

在多页面应用中，每当页面跳转时服务器会为你获取一个新的html，页面重新加载新文档，并且资源被重新下载，然而，这给我们特殊的机会去做更多的事情

使用CommonsChunkPlugin 为每个页面间的应用程序共享代码创建bundle，由于入口起点增多，多页应用能够复用入口起点之前的大量代码/模块，从而可以极大地从这些技术中收益

出口 （output）

webpack中使用output属性来控制如何向硬盘写入编译文件，即使多个入口，但最后的输出配置只能有一个

output的属性最简单的是

filename 用于输出文件的文件名

目标输出目录path的绝对路径

const config = {

output：{

filename: 'bundle.js',

path: '/home/proj/public/assets'

}

}

module.exports = config

此配置是将单独的bundle.js 文件输出到/home/proj/public/asstes/ 目录中

多个入口起点 使用占位符如下面的 [name]

{

entry: {

app:'./src/app.js',

search: './src/search.js'

},

output: {

filename: '[name].js',

path: __dirname + '/dist'

}

}

使用cdn和资源hash的复杂示例

output: {

path: "/home/proj/cdn/assets/[hash]",

publicPath: "http://cdn.example.com/assets/[hash]/"

}

loader

loader 用于对模块的源代码进行转换。 loader 可以使你在 import 或"加载"模块时预处理文件

loader运行你自定义扩展项目中的文件，使用对应的loade编译成js， css， html

loader配置在rules数组数组中

其中每一条记录，test表示正则匹配的文件范围

loader表示loader的名称

loader的配置有三种

配置: 在webpack.config.js 文件中制定loader

内联： 在每个import语句中显式指定loader

CLI：在shell命令中指定它们

配置的案例

module:{

rules: [

{

test: /\.css$/,

use: [

{loader: 'style-loader'},

{loader: 'css-loader',

{

options: {modules:true}

}

}

]

}

]

}

内联

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

CLI

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

loader 特性

loader支持链式传递， 一个文件可能会被多个loader处理，前一个loader返回值给下一个loader，在最后一个loader

，返回webpack所预期的JavaScript

loader可以是异步的，也可以是同步的

loader运行在Node.js中，并且能够执行任何可能的操作

loader接受查询参数，用于对loader传递配置

loader也能够使用options对象进行配置

webpack

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。