这是我参与「第四届青训营 」笔记创作活动的的第2天。由于篇幅字数，分为两个笔记提交。
一、本堂课重点内容：
本人在课后自行练习，以下是个人练习心得：
1． Webpack简介
2． Webpack打包配置
3． Webpack的Loader
二、详细知识点介绍以及例子：
1、 Webpack简介
webpack是文件打包工具，主要用于前端模块化方案，预编译模块的方案。它可以把项目的各种js、css文件等打包合并成一个或多个文件。与gulp不同的是，webpack倾向于打包，而gulp倾向于完成scss转css,ES6转ES5等自动转换的任务，gulp几乎没有涉及到模块化开发而是在强调前端流程的自动化。
此处全局安装webpack@3.6.0进行测试，通过命令行测试测试打包为一个文件，名为bundle.js。
命令：
webpack ./src/main.js ./dist/bundle.js
在main.js中对模块的ES6导入语法，到了bundle.js中产生了一些变化
main.js：
//使用ES6导入(每次修改js后需要重新打包)import {name,age,height} from "./info.js";console.log(name,age,height);
bundle.js：
//使用ES6导入(每次修改js后需要重新打包)console.log(__WEBPACK_IMPORTED_MODULE_0__info_js__["c" /* name */],__WEBPACK_IMPORTED_MODULE_0__info_js__["a" /* age */],__WEBPACK_IMPORTED_MODULE_0__info_js__["b" /* height */]);
通过webpack打包后，在项目实际调用的文件数量可以显著的减少，只需要在index.html引入打包后的产物。
引入代码：
<script src="./dist/bundle.js"></script>
2、 Webpack打包配置
在Webpack简介中介绍了其原始打包命令，在实际开发中，我们会进行相应的配置简化webpack的使用。此处测试的webpack是作为开发时依赖局部安装的，在项目根目录建立webpack.config.js进行相关配置。
以下为配置内容以及相关见解：
const path=require('path')//node包中的模块（配合npm init生成package.json）//可以省略webpack打包命令的两个参数（）实际开发也并不用webpack命令而是npm serve和npm run build(映射简化)module.exports={ entry:'./src/main.js',//打包源码路径 //
output:'./dist/bundle.js'//生成路径(不推荐这样子用)，建议使用对象 output: { //path:'./dist',//默认需要绝对路径，目标是实现动态的获取路径 path:path.resolve(__dirname,'dist'),//使用npm path组件,__dirname（node全局变量存放当前绝对路径信息），拼接第二个参数 filename:'bundle.js' },}
于是可以在项目路径中直接执行命令”webpack”来打包项目。
此外，还可以在package.json中的scripts配置npm run 命令来调用webpack
此处配置的是npm run build，且优先使用局部安装的webpack
scripts:{"build":"webpack"}
3、 Webpack的Loader
除了js文件，配合相应的loader，Webpack支持打包多种文件。
这些loader通过npm进行安装，loader通常是开发时依赖，所以不需要全局安装或者局部安装为运行时依赖，和webpack一样仅用于打包。
常用的loader有css-loader、less-loader、url-loader以及babel-loader。
其中babel用途是将ES6语法的js转为对应的ES5语法js以提高对部分非主流浏览器的兼容性。
使用方式：
通常是去webpack官网查阅相关loader并将相应的配置复制粘贴到webpack.config.js的module属性的rules数组中，再根据需求进行一定的修改。
如：
module:{ /*启用css-loader@2.0.2*/ /*style-loader将模块导出作为样式添加到DOM中（真正启用样式）@0.23.1*/ rules:[//去webpack文档复制相关配置 { test:/\.css$/,//正则匹配以.css结尾的文件 //css-loader仅负责加载不负责解析样式，故需要style-loader //use多个loader时，顺序是从右向左 use:['style-loader','css-loader'] }, { test:/\.less$/, use:[//使用对象数组，支持在一个对象中放更多参数 { loader:'style-loader' }, { loader:'css-loader }, { loader:'less-loader', //options:'可待定参数' } ] }, ] }
可见webpack的loader是通过正则匹配文件名后缀来判断文件类型并调用相应的loader进行打包。
但同样有些事情需要注意：
less等需要编译的样式表文件除了需要相应的loader（如less-loader），还需要css-loader（用来读取编译后的css）以及style-loader（读取模块化的页面内部的style标签内容）。
三、课后个人总结
以上是我个人在学习使用Webpack时记录的一些相关的特点以及使用方法，还有三方面的内容详见下文。
