前端工程化
- 模块化(js复用)
- 组件化(UI复用,layui)
- 规范化(各种规范)
- 自动化(自动构建、自动部署、自动化测试)
前端工程化指的是:在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化
Vue项目和React项目，都是基于工程化的方式进行开发的
webpack
功能：代码压缩混淆、处理js的兼容性、性能优化等
文件结构：根目录下src文件夹放index.html,index.js
安装webpack
npm install webpack webpack-cli
①在项目根目录中，创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置
module.exports = {
mode: "development" //mode用来指定构建模式。可选值有development 和production
}
production模式下代码会进行压缩，打包时间较长
开发时用development，追求打包速度，上线时用production，追求体积小
②在package.json的scripts节点下，新增dev脚本如下:
"scripts": {
"dev": "webpack" // script节点下的脚本，可以通过npm run执行。例如npm run dev
}
运行
npm run dev
先读取webpack.config.js中的配置信息，然后根据配置信息执行webpack
可将index.html中一些因为兼容问题产生的报错修复，修复 结果保存在dist/main.js下（并没有进行压缩）
默认约定
- 默认打包入口文件为src->index.js
- 默认输出文件路径为dist->main.js
可以在webpack.config.js中修改默认值（案例8：38），entry指定入口，output指定出口
案例参照
webpack插件
webpack-dev-server
npm intall webpack-dev-server -D
将package.json->script中的dev进行修改
"dev" : "webpack serve"
运行
npm run dev
当修改index.js时，会自动进行打包，并保存在根目录的main.js中（其实是保存在内存中，便于频繁读写），所以js引用应改为
<script src = "/main.js"></script>
在http://localhost:8080/下的src中查看实时渲染结果
Ctrl+C 关闭实时监听
html-webpack-plugin
如果希望访问8080后就看见渲染结果，可以使用html-webpack-plugin插件，将src中的index.html复制到根目录中（依然是在内存中）
npm install html-webpack-plugin
在webpack.config.js中
// 1.导入HTML 插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.创建HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', //指定原文件的存放路径
filename: './index.html', //指定生成的文件的存放路径
})
module.exports = {
mode:'development',
plugins: [htmlPlugin], //通过plugins 节点，使htmlPlugin 插件生效
}
。。。。nb，Vue-cli中可以自动配置，白学
devServer节点
webpack.config.js配置文件中
devServer:{
open:true,//打包完成后自动打开浏览器
port:80,//修改端口
}
webpack中的loader
webpack默认只能处理.js文件，其他后缀文件需要调用loader加载器才能正常打包，否则会报错
截至视频P15，待续
标签：npm,index,Vue,webpack,dev,js,Webpack,html From： https://www.cnblogs.com/exungsh/p/17112386.html