关于前端:webpack初体验

webpack 根底用法

外围概念之 Entry

Entry 用来指定 webpack 的打包入口。webpack 是一个模块打包器，在 webpack 外面会把所有的资源 (js、css、html、图片、字体) 当成一个个模块，所有这些模块之前会存在依赖关系，因而 webpack 外面会从入口文件 (entry 指定) 开始寻找依赖，依赖又存在其余依赖的文件，这样就造成一颗依赖图，对于非代码比方图片、字体依赖也会一直退出到依赖图外面。

Entry 用法
单入口：entry 是一个字符串（单页利用）

module.exports: {entry: './path/to/to/entry/file.js'}

多入口：entry 是一个对象（多页利用）

module.exports={
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
}

外围概念之 Output
Output 用来通知 webpack 如何将编译后的文件输入到磁盘，以及输入和的文件名称

output 用法：多入口配置
不论是单入口还是多入口，output 外面都是只有一个，那么 output 如何做到输入不同入口对应的打包文件，那就是应用占位符（[name]）确保文件名的惟一

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {filename: '[name].js',
    path: __dirname + '/dist'
  }
}

外围概念之 Loaders

webpack 开箱即用只反对 JS 和 JSON 两种文件类型，通过 Loaders 去反对其余文件类型并且把他们转化成无效的模块，并且能够增加到依赖图中。

自身是一个函数，承受源文件作为参数，返回转换的后果。

常见的 Loaders 有哪些？

Loaders 的用法
一个 webpack 配置外面会存在多个 Loader，这些 Loader 须要寄存在 module 的 rules 数组外面

const path = require('path')
module.exports = {output: {},
  module: {
    rules: [{test: /\.txt$/, use:'raw-loader'} // test 指定匹配规定，use 指定应用的 loader 名称
    ]
  }
}

外围概念之 Plugins

插件用于 bundle 文件的优化，资源管理和环境变量的注入，任何 loaders 不能做的事件都能够用 plugins 实现。
Plugins 作用于整个构建过程。
常见的 plugins 有哪些？