webpack学习笔记
webpack学习笔记
首先webpack要理解好什么是webpack？
在我的理解下，webpack是指在一个功能很强大的打包工具，并且我们可以通过他进行模块化开发，觉得越来越重要在前端的位置上，基本上很多框架都是基于此的
四个核心概念
入口
什么是入口，顾名思义，是指webpack应该从哪个方面作为构建内部依赖图的起点，在我理解下，我觉得这个入口文件一方面便于webpack去启动去找到对应的入口，另一方面
可以把设置很多个入口方便管理各个模块和库那些
输出
有入口肯定出口，在我看来，出口就是在webpack进行好一系列的运作，然后在出口那里输出打包好的文件，既经过webpack处理后的成品。
loader
其实webpack说到底就是一个打包工具，他只能够理解JS文件，对于一些类似于HTML，CSS等文件它是没办法自己自己识别的，所以就需要一个模块对于这些非JS文件识别打包。
插件
除了它之前说到的loader这个解析一些非JS文件的模块，它还有一个比较强大的功能是插件功能。什么是插件？就是我们在处理文件是不仅仅需要解析它，还需要打包优化，压缩等等一系列的操作，在这个过程中，我们通过自定义的形式增加或删除插件
模式
还有一个比较核心的概念。就是模式，模式是一个可以设置在不同配置下启动不同模式的优化
入口起点
const config = {
entry:'./path/to/my/entry/file.js'
}
module.exports = config;
这是单个入口比较容易但有时候在使用此语法在扩展配置时不太方便。
这个时候可能需要多个入口即对象语法
const config =~~~ {
entry:{
app:'./src/app.js'
vendors:'./src/vendors.js'
}};
此模式多用于只有一个入口起点的单页面程序
多页面应用程序
const config = {
entry:{
pageOne:'./src/pageOne/index.js'
pageTwo:'./src/pageTwo/index.js'
pageThree:'./src/pageThree/index.js'}
};
在多页应用中，服务器讲未呢获取一个新的HTML文档，页面重新加载文档资源会被重新下载，使用CommonsChunkPlugin 可以每个页面间的应用创建bundle，从而能复用入口起点的大量的代码。
一般来说，HTML文档呢只有一个入口起点
出口（输出）
一般来说在webpack中配置output的属性的最低要求时，讲呀的值设置未一个对象，包括以下两点：
1.filename用于输出文件得到文件名
2.目标输出的目录的绝对路径
const config = {
output:{
fiename:'bundle.js'
path:'/home/proj/public/assets'}
};
module.exports = config;
这是单个入口的配置，此配置讲一个单独的bundle.js文件输出到/home/proj/assets的目录中
多个入口起点
如果配置多个入口的一般野有多个出口可以用占位符来确保每个文件具有唯一的名称。
{
entry:{
app:'./src/app.js',
search:'./src/search.js'
},
output:{
filename:'[name].js',
path:_dirname +'/dist'}
}
模式
提供mode，告诉webpack按找哪种方案优化；
旨在配置中提供mode选项即可以的
module.exports = {
mode:'production'}
或者在配置时写上
webpack --mode=production
具体怎么启动贴下官网的简介
loader
重点来了，我觉得这个loader是十分重要的，因为它用于对模块的源代码进行转换，并提供了处理前端构建步骤啊的方法，之前说了loader是为了让webpack能够处理非JS的文件将一些非JS文件转化为JS文件或者让WEBPACK能够读懂非JS文件像CSS等
打个比方
当你需要加载CSS文件时，护着将TypeScript转换为JavaScript收件安装对应的loader
npm install --save-dev css-loader
npm install --save dev ts-loader
然后指示webpack对每一个.css使用css-loader以及对所有的.ts文件使用ts-loader
webpack.config.js的配置如下
module.exports = {
module:{
rules:[
{test:/\.css$/,use:'css-loader'},
{test:'/\.ts/',use:'ts-loader'}
]
}
怎么使用loader
有三种方法
1.配置（推荐）：在webpack.config.js文件中指定loader
2.内联：在每个import中显式指定loader
3.cli:在shell命令中指定他们
1.配置
在module.rules中可以配置多个loader，比较简单明了，维护也比较方便，比较推荐
2.内联
在每一个import语句中指明需要用哪种loader
import style from 'style-loader!css-loader?modules!./styles.css'
通过！将资源中的loader分开。分开的每部分都相对于当前目录解析。
通过前置所有规则以及使用！，可以对应覆盖到配置中的任意的loader
3.cli
可以通过cli使用loader
webpack--module-bind jade-loader --module-bind'css=style-loader!css-loader'
loader的特性
loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
loader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。