webpack学习笔记1

webpack做用

webpack能够将前端工程中全部的静态资源打包成为一个或者多个js，静态资源包括css、图片等。

为何要使用webpack，没有打包工具以前，页面之中使用ES六、SCSS、TypeScript等浏览器不支持的前端新语法的时候都很是困难，有了webpack就能够很是方便的在项目之中使用这些新的语法，从而提高前端项目开发的速度和质量。另外在webpack之中项目中全部的资源都是模块，包括js，还包括css、图片等等。只要有合适的loader去处理这些静态资源就能够了。webpack还提供了插件的功能，丰富了webpack的功能。以上的这些让webpack成为前端项目构建工具的主流和首选，gulp和grunt可能成为了历史。头部资源终将占据统治地位，webpack成为前端项目构建工具的头部资源。

模块化编程

模块的概念是将程序拆解为离散的功能块，一般称这些功能块为模块。模块相对于程序而言，具备更小的体积，单个模块具备清晰的目的，方便进行开发、测试、维护等工做。模块的功能通过了抽象，提升了代码的复用能力。

模块的打开姿式

webpack支持常见的模块依赖，如es5的import，commonjs的require，css文件的@import，样式中的url。webpack可以支持的模块有webpack常见的loader

webpack核心概念

entry 入口文件

webpack是经过递归的方式来找出全部依赖之间的关系，并构建依赖图。须要在配置文件中指定使用哪一个模块做为依赖图的起始，进入起始依赖后就能够根据起始模块中指定的依赖来将其余依赖将入进来。多个入口匹配单一输出：entry:'./src/script/main.js'，在main.js之中可使用require或者其余方法例如import来导入其余的文件。
module.export = {entry:'./index.js'}

当存在多个入口的时候呢，可使用entry:[]的形式。
多个入口文件匹配多个输出结果：entry必须采用对象的方式，这样可使用对象的key做为出口文件的文件名。并在不一样的文件中使用这些不一样的输出。示例：entry：{page1:'a.js',page2:'b.js'}，output:{path:'输出结果的绝对路径',filename:[name].js}这里必须使用占位符来达到生成不一样文件的效果，为了显示屡次输出的不一样版本号可使用[hash]占位符。
hash值采用md5算法，即根据文件中内容来改变。

output 输出文件

output指定了最终要将打包好的js放在什么路径下，默认是dist。路径指定的是绝对路径，须要经过nodejs的path模块来获取当前的文件路径。
const path = require('path')
module.export = {output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'}}

loader 加载器（中间件）

loader让webpack有能力去处理费JavaScript文件，webpack自己只能理解JavaScript。丰富loader（官方的和第三方）能够将全部类型的文件都转化为webpack能够理解的JavaScript，webpack发挥的做用是将JavaScript和转化为JavaScript的资源按照相互依赖的关系打包。
而且这些loader之间能够灵活的组装，开发者能够根据本身的需求灵活的定义loader的构成。loader的配置方法为
module.export = {

module:{
    rules:[
        {
            test:\.js$\,
            loader:'babel-loader'
        },
        {
            test:\.css$\,
            loader:'style-loader!css-loader'
        }
    ]
}

}
配置文件告诉webpack当遇到符合test对应正则表达式的文件时，先使用对应的loader转化一下。

babel-loader的使用方法

安装babel loader来处理es6的语法，安装npm较多，包括babel-loaderbabel-core\
babel-loader能够经过参数presets（预设）来指定es6的版本，可选的参数有：'es2015','es2016','es2017','latest'。在使用preset的时候不只须要经过config.js来指定使用何种preset，还须要安装相关的preset的npm包。例如安装preset为latest的的npm包，命令是：npm install babel-preset-latest --save-dev

plugin 插件

还有一部分工做是loader不能完成，例如压缩、打包优化、从新定义环境中的变量等等。能够说plugin的能力是loader的父集。使用plugin的方式是先引入插件模块，经过require。而后在配置对象的plugin中建立插件的实例。
const htmlWebpackPlugin = require('html-webpack-plugin')
module.export = {

plugin:[
    new htmlWebpackPlugin({template:'./index.html'})
]

}

plugin接受一个数组做为其value，数组中是各个插件的构造函数，能够在这些构造函数传入相关的参数来达到目的。例如经过使用html-webpack-plugin来实现自动引入打包的内容，再也不使用手动的方式来实现。还能够加入[hash]来保证引入文件的命名的惟一性，从而能够保证上线时候引用的是最新的版本。

html-webpack-plugin的参数有：
{filename:'生成的文件名',
title:'文件中的title',
template:'以什么文件做为其模板',
chunks:['使用什么chunk'],
excludeChunks:['排除什么chunk']
inject:['chunk的引用放在什么地方']
}

webpack命令行的一些参数

• 1.指定特定文件的loader： --module-bind 'css=style-loader!css-loader'
• 2.显示打包进程： --progress
• 3.显示全部打包模块： --display-modules
• 4.显示打包缘由： --display-reasons
• 5.指定打包配置文件： --config
• 6.自定义命令行脚本：在package.json之中来定义