Webpack飞行手册

正文

请到「今天看啥」查看全文

基本上 一个配置文件的大体结构就是下面这样：

modules.export={
    entry:{
        /* 入口文件 */
    },
    output:{
        /* 出口文件 */
    },
    module:{
        /* Loader */
        rules:[{},{},{}]
    },
    plugins:[ 
        /* 插件 */ 
    ],
    devtool: ...
    devServer: {...}
    resolve:{...}
}

我们下面就先分析 modules.export 各个属性

入口

entry 代表是入口文件，Webpack 工作的开始。

Webpack 会递归的探索出 入口文件中所依赖的模块，并按照顺序 利用 Loader 进行处理。

官网给出了其 3 种数据类型：

1. 字符串

    entry: "app.js";

2. 数组

   数组中的每一项都会被打包，形成互不依赖的文件

    entry: ["app.js","main.js"];

3. 对象

   对象中的每一个属性都会被打包，形成互不依赖的文件

    entry:{
        app: "./src/js/app.js",
        main: "./src/js/main.js"
    }

一般入口文件中多是 import 或者 require 等模块导入命令。

出口

output 顾名思义，Webpack打包后文件的具体配置 常用的属性有 4 个

1. path: ${__dirname }/dist

   打包后文件所在路径

2. filename: "js/[name].js"

   打包后文件的名字，这里有 4 种常用的写法

   1. 自定义

   2. [name].js

      代表的便是入口的文件名

   3. [hash].js

      此次打包后的hash值

   4. [chunkhash]

      该块打包后的hash值

3. publicPath: "http://cdn.com/"

   上线时的公共路径，主要应用于线上

4. chunkFilename: 'js/[name].js'

   按需加载模块时输出的文件名称

Loader

Loader 是 Webpack 中最振奋人心的东西了！

将一切浏览器不支持的语言，处理成 浏览器可以支持。 针对各个文件类型，都有各种的 Loader 等你去挖掘。

Loader 的工作方式 是从右向左执行，链式地按照顺序进行编译。 loader 链中的第一个返回值给下一个 loader，在最后一个 loader，返回所预期的结果。

loader 可以是同步或异步函数，也可使用 options 对象去接受配置参数。

基础结构

module:{
 	rules:[
 	   	{
  			test:/\.xxx$/,//以xxx结尾的文件
  			loader: "xxx-loader",
 	 		exclude: {排除的路径},
 	 		include: {包含的路径},
 	 		options: {Loader配置}
 	 	}
 	]
}

可以很清楚的看到，Loader 利用 test 的正则 找到各个类型文件，然后使用 loader 进行处理，便可转换成浏览器支持的文件。

其中我知道的 loader 的写法有两种:

1. 每一个 loader 都是一个对象

loaders:[
 	{loader:"style-loader"},
 	{ loader: "css-loader?modules", options: { importLoaders: 1 } },
 	{loader: "less-loader"}
]

2. 使用 ! 号拼接的写法

loader: "style-loader!css-loader?importLoaders=1!less-loader"

下面介绍三个 前端必备的 Loader 方式

css

1. style-loader

请到「今天看啥」查看全文