webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

命令：webpack --config webpack.dev.config.js //webpack.dev.config.js是webpack配置文件的名字 开始打包

webpack命令运行时 加参数可以在package.json里配置

webpack.config.js 里 entry:可以传1个参，也可以传多个（1数组形式，解决两个平行的、不相依赖的文件打包在一个文件；2对象形式

据说在多页面时会用到这种方式，需要回头了解）

============================9月9日更新===============================

 

output 占位符：[name]\[hash]\[chunkhash] 使用占位符可以保证 如上图当多个文件打包时，output不会打包在一个文件里，不会相互覆盖

 

自动化生成项目中的html文件：使用插件：html-webpack-plugin

1:安装：npm install html-webpack-plugin --save-dev

2:在webpack.config.js里将插件require进来

plugins下的template:绑定index.html和打包生成的index-[hash].html文件，inject：指定script标签的位置

在index.html文件里，可以通过htmlWebpackPlugin对象的属性拿到webpack.config.js的plugins里的属性值，如上图。

什么是Loader及Loader的属性

webpack本身只能处理js模块，如果要处理其他类型的文件，要使用loader进行转换，

在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。