10分钟熟练使用webpack

webpack使用场景，基本配置及参数的功能。
新建一个目录，然后npm init初始化这个项目，安装webpack ：npm install webpack --save-dev。
webpack打包默认配置文件名：webpack.config.js
官方文档：webpack.github.io/docs/config…
代码：
module.export = { entry : './src/script/main.js', //打包入库从哪个文件开始 output : { //指明打包后文件放到什么位置 path : './dist/js', //打包后的文件放到这个目录下 filename: 'bundle.js' //打包后文件的名字 } }

webpack指定打包配置文件 命令
webpack --config webpack.dev.config.js

配合npm脚本给webpack在命令行使用一些参数。
/package.json

然后在命令行运行 npm run webpack
webpack参数介绍
1.entry 打包入口指示，为了应付各种需求，官方给出三种方式来匹配不同需求。
第一种: 输入简单string指定一个简单入口文件。所有依赖都在这个一个入口文件指定。
第二种：是一个数组 ，webpack为了解决两个平行互相依赖的文件，却想打包到一起。

第三种：是一个对象分key和value。多页面应用程序会运用这个场景。
2.output 打包出口
[name] name占位符
[hash] 哈希值
[checkhash] 类似：保证文件唯一性的哈希值，比如md5值。只有当文件发生改变的时候，这个值会改变。
实际开发项目中
1.webpack插件 html-webpack-plugin
安装 npm install html-webpack-plugin --save-dev
var htmlWepackPlugin = require('html-webapck-plugin') //引用插件
Loader使用
处理项目中的JS
bable-loader转换ES6代码
通过指定Presets来告诉babel loader转换某一些特性
如果转换所有特性可以指定latest（es2015,2016,2017）
怎么指定插件呢
给loader指定一个参数Query parameters
1.require（'url-loader？'）//？后面跟参数
2.配置文件中
loaders: [ { test: /\.js$/, loader:'babel', query:{ presets:['lastest'] //指定loader } } ]
3.还可以在项目根目录建 .babelrc 配置文件
{
"presets":["es2015"]
}
4.还可以在package.json文件指定

此时配置文件已经告诉webpack通过babel-loader 处理js文件。
module.loaders定义的参数
● test js正则匹配 条件
● exclude loader排除范围，比如某一个目录下不让它处理
● include loader处理的范围
● loader
● loaders 把一长串的loader通过一个数组表示

path是Node的一个api，path对象上有一个方法resolv（解析）， dirname是运行环境下的变量，也就是在当前运行环境的路径，后面是相对路径。
（dirname）当前的目录，再加个一个相对路径（api/src），解析完后得到一个绝对路径

使用babel-loader来让webpack配置解析es6的js代码，转化成浏览器直接运行的js代码。
处理项目中的CSS
匹配css的正则条件 ，css-loader和style-loader 用！串联起来

postcss loader,后处理css
npm install postcss-loader --save-dev //安装
npm install autoprefixer --save-dev postcss的插件

css的loaer是从右至左执行顺序
设置postcss属性，与module同级，返回postcss的loader需要插件一个列表数组

如果在css中通过@import这个语法引入其他模块或者css也要使用postcss-loader，希望项目下css文件通过统一的方式处理，可以使用postcss-loader的一个参数设置。

处理项目中的LESS文件
安装处理less文件的loader， npm i less-loader --save-dev

项目使用sass同理
处理模板文件
把模板（静态html页面）作为字符串引入进来，通过webpack-loader进行打包
安装 npm install html-loader --save-dev
设置loader匹配规则

实际开发中，模板可能会用到一些模板语法。假设是以.ejs或者.tpl结尾的模板。ejs-loader相关的模板并且会返回给一个已经直接编译好的函数。

配置ejs或者tpl的loader

app.js

处理项目的图片文件
会分为几种情况，第一种情况是css中会有背景图片，第二种情况是html模板结构中引用某一种文件。
npm install file-loader --save-dev
增加对图片的规则loader

如何修改图片打包后的输出地址

安装url-loader npm install url-loader --save-dev
url-loader可以指定一个limit，当图片（文件）大于指定limit值，会将图片（文件）扔给file-loader；当小于limit值，会将图片（文件）转为base64编码。

有两种方式处理项目中引用过来的图片（文件），一种是url方式通过http请求过来的图片，一种就是base64的方式。通过http请求载入过来的图片，可以使浏览器做图片（重复出现）缓存。
如何对通过http请求过来的图片进行压缩
安装 npm install image-webapck-loader --save-dev

压缩后的图片