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 有两个目标:
- test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性,表示进行转换时,应该使用哪个 loader。