第9阶段：了解和理解前端的构建，第二天
webpack是一种在node.js中实现的工具，本节重点介绍如何安装和使用webpack以及如何用webpack打包vue项目。 npm安装说明：
1，创建一个文件夹day1，然后在该文件夹下运行npm init。 目的是生成package.json文件；
2，使用npm install-D webpack或： npminstall--save-Devwebpack安装webpack，-d和--sava-dev等编写本课程时使用的web包版本为4.43.0，V4 (或更高版本)必须安装web包- CLI并运行NPM install-- save-dev web包- CLI命令。
安装完成后，package.json的内容如下所示：
web包安装完成后，用web包打包vue实例，以了解web包的软件包配置。
第一步：创建该有的文件
在名为day1的文件夹下创建文件。 最终的目录结构如下。 home是采用vue实现的页面。
index.html:html模板文件，其中，div是Vue实例使用的元素节点，script标记中的./dist/day1.js文件是打包文件。
index.vue相当于vue组件。
用于创建index.js，Vue实例的文件将用作主页上的门户文件。
第二步、配置 webpack
打包之前，必须创建webpack.config.js文件。 此文件用于告诉您web包应该如何打包，并包含特定的打包配置信息。
1、模式离线还是在线模式
支持打包模式、development (开发模式，易于调试)、production )在线模式，并进行文件压缩等优化处理。
2、entry 请告诉我从哪个文件开始
打包我的入口。 包装时，告诉webpack从哪个文件开始包装。 在此示例中，软件包入口文件为home/index.js，可以支持多个入口，如下图所示。
3、output 包做好了。 放在哪里
与打包结果相关联的配置，其中filename指定打包后的文件名，path指定存储打包结果的路径；
4、模块所有文件都是模块
webpack如何处理各种文件，包括遇到vue文件时告诉vue-loader，遇到css文件时通知css-loader，总之就是寻找和处理可以由文件处理的工具
模块主要构成loader，loader用于处理不同的文件。 例如，less文件可以在less-loader中转换为css文件。 loader其实是函数：
5、plugins 请给我特别的服务
对于插件，plugin也主要用于扩展web包的功能，它可以接收web包在构建期间编译过程中发生的事件。 plugin其实是一个类，需要实现APP函数。 webpack在使用插件时调用该插件实现的APP的方法。
在介绍了webpack配置文件的基本概念之后，我们来看看webpack.config.js中的具体配置信息。
//path提供给节点的模块，可以直接使用constpath=require('path )。 //vue-loaderwasusedwithoutthecorrespondingplugin.//makesuretoincludevueloaderpluginyourwebpackconfig.//vue-loack 必须使用名为VueLoaderPlugin的插件//部署时仅称为VueLoaderPlugin的constvueloaderplugin=require (vue-loader/lib/plugin )
n');// webpack 的配置其实就是一个对象module.exports = { // 设置打包方式，支持 development 和 production mode: 'development', // 打包入口文件 entry: './home/index.js', // 最终打包结果配置 output: { filename: 'day1.js', path: path.resolve(__dirname, './dist') }, // 配置 loader，不同文件应用不同的 loader module: { rules: [ { // vue 文件采用 vue-loader 来处理 test: /.vue$/, use: ['vue-loader'] }, { // css 文件，先采用 css-loader 处理， // 再使用 style-loader 处理，注意顺序 test: /.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ // vue-loader 目前需要 VueLoaderPlugin，不然会报错 // 直接创建了 VueLoaderPlugin 实例 new VueLoaderPlugin() ]}第三步、打包命令配置
通过 ./node_modules/webpack/fddct/webpack.js --config webpack.config.js 这条命令来进行打包，除了使用 --config 配置参数外，还可以通过 --help 查看其它命令参数：
为了避免每次都要写 ./node_modules/webpack/fddct/webpack.js --config webpack.config.js 这么一长串的命令，可以使用 npm scripts 来简化操作，修改 package.json 中的 scripts 属性，添加 build，执行命令 npm run bulid 即可进行打包：
Node 8.2/npm 5.2.0 之后自带了 npx，它的作用是自动查找脚本所在的位置，可以省略 webpack 的具体文件路径：
其实连 npx 都可以省略：
"scripts": { "build": "webpack --config webpack.config.js"}更过分的是可以这样写（--config 不建议省略）：
"scripts": { "build": "webpack"}第四步：跑起来
执行 npm run build，将在根目录下生成一个 dist/day1.js 文件，也就是打包后的文件。
在浏览器里打开 index.html 文件：
本节完，诚挚邀请你来思考下面的问题并打卡：
1、本节内容只有一个 html 页面，如果项目里有多个 html 页面，该如何配置 webpack；
2、在 index.html 文件中，我写了<scriptsrc="../dist/day1.js"></script> 这句话，如果有多个 html，我需要多次写这句话来引入不同的打包结果文件，有没有好的方式来做这件事情；
3、本节内容中你学到了什么，要没有需要改进的地方；
代码入口：https://github.com/lefex/FE/tree/master/webpack/day1
大家加油，贵在坚持！
推荐阅读：
第 8 阶段前端动效结束，下一阶段内容预告