这是我参与「第四届青训营 」笔记创作活动的的第3天。
一、本堂课重点内容：
1、 Webpack配置前端框架
2、 Webpack插件安装
3、 Webpack配置分离
二、详细知识点介绍以及例子：
1、 Webpack配置前端框架
本人学习的是前端框架vue2，此处使用vue2进行记录。
在真实开发中，我们写下的代码大多是开发框架专用的代码，所以使用webpack打包的项目同样需要配合相关的loader来进行开发。
首先在main.js中导入通过npm安装的vue框架来使用它：
import Vue from ‘vue
开发时，写下的vue组件都是以vue为后缀的文件，所以还需要使用vue-loader来进行相应的打包，在webpack的配置文件中的module加入相关代码来启用vue-loader:
{//vue loader test:/\.vue$/, use:['vue-loader'] }
这样，在组件调用时导入vue文件也可以正常打包了。
在导入vue文件时，使用import语句，通过配置webpack还可以达到简化导入文件后缀的效果：
在resolve中加入相关参数：
resolve:{ /*配置后缀扩展名，可以在导入时省略*/ extensions:['.js','.css','.vue'], /*别名*/ alias:{ 'vue$':'vue/dist/vue.esm.js'//以vue结尾匹配为新的路径，解决vue不渲染等编译问题 //或者直接在import vue时指定该路径来解决 }, }
简言之就是预设可以省略的后缀名。在此代码块中还解决了vue渲染问题（由于配置开发环境时选择的vue-compiler-runtime和vue-runtime-only之间的差距导致）
配置完成后就可以简化。
如：在App.vue中导入Cpn.vue
import Cpn from "./Cpn.vue"
可以简化为
import Cpn from "./Cpn "
2、 Webpack插件安装
在webpack实际开发中，还可借助其插件简化一些依赖的导入（html-webpack-plugin）、压缩生成的代码来提高传输文件的可靠性（uglifyjs-webpack-plugin）以及自动生成部分提示信息横幅（导入webpack来使用）。
在安装好要使用的插件后，首先是导入插件：
在webpack配置文件导入，通常是在文件头部处
const webpack=require('webpack')//导入webpack包使用其内置插件（如打包文件说明横幅）const webpack=require('webpack')//导入webpack包使用其内置插件（如打包文件说明横幅）const uglifyJsPlugin=require('uglifyjs-webpack-plugin')//js代码压缩
然后在配置主体中，设置plugin属性：
plugins:[//使用插件 new webpack.BannerPlugin('这是提示信息'), new HtmlWebpackPlugin( { template:"index.html"//在配置文件当前目录寻找index文件作为模板 } ), // new
uglifyJsPlugin()//不推荐在开发中使用而发布时可以 ],
使用了webpack.BannerPlugin插件后，在打包后的js中会出现预设的提示信息
使用了uglifyjs-webpack-plugin后，js代码会被压缩丑化，通常在生产中使用而不是在开发中使用。
使用了html-webpack-plugin可以在插件选项中让打包好的js导入到指定的index模板，不必再index.html中通过script标签来引入了
3、 Webpack配置分离
考虑到生产和开发两种情景，webpack的配置是有变化的，如：在生产环境中，代码都是丑化压缩的，而在开发中则会使用开发服务器，利于开发调试并监听代码改动实时更新。除去这两者依赖，就是基础依赖了，基础依赖是两者公用的依赖，可以说是交集，我们通常抽离出来单独管理。
所以webpack的配置通常分为三种：生产、开发、基础。
以下是手动配置的例子：
三、课后个人总结：
虽然在实际开发中已经不会再使用手动配置webpack而是使用vue-cli，但是经过此次课程，我对vue-cli等脚手架的原理有了更进一步的了解，我相信这对我修改其相关配置有显著的帮助。
