webpack初体验前端

webpack基础用法
核心概念之Entry Entry用来指定webpack的打包入口。webpack是一个模块打包器，在webpack里面会把所有的资源(js、css、html、图片、字体)当成一个个模块，所有这些模块之前会存在依赖关系，因此webpack里面会从入口文件(entry指定)开始寻找依赖，依赖又存在其他依赖的文件，这样就形成一颗依赖图，对于非代码比如图片、字体依赖也会不断加入到依赖图里面。
Entry用法
单入口：entry是一个字符串（单页应用）

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

【webpack初体验】多入口：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有哪些？

babel-loader	转换ES6、ES7等JS新特性语法
css-loader	支持css文件的加载和解析
less-loader	将less文件转换成css
ts-loader	将TS转换成JS
file-loader	进行图片、字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

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有哪些？

CommonsChunkPlugin	将chunks相同的模块代码提取成公共js文件
CleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将CSS从bundle文件里提取成一个独立的CSS文件
CopyWebpackPlugin	将文件