本主题主要梳理下Vue的项目构建模式，并介绍真正服务于各种需求的插件功能：
1. html-webpack-plugin；
2. css-loader与style-loader；
3. extract-text-webpack-plugin；
4. url-loader与file-loader；
5. html-laoder
还有各种花式插件与loader，比如sass与less样式语言插件，各种框架模板插件，其实都是一个语法问题，编程模式都一致滴。
webpack Web项目构建
步骤
- 创建项目工程根目录；
- 创建项目工程目录结构；
- 创建npm工作配置文件config.json（可选）；
- 创建js入口文件；
- 创建使用打包js的页面文件；
- 创建webpack配置文件框架webpack.dev.conf.js；
- 配置mode；
- 配置entry与output；
- 配置devServer参数；
- 在npm中配置服务器启动scripts；
- 启动服务器；
- 使用浏览器访问；
操作
- 创建项目工程
创建项目工程
- 创建工程目录
创建工程目录
- 生成npm管理配置文件
创建package.json配置文件
- 使用VSCode打开项目路径，并在其中创建并编辑js文件；
-
VSCode编辑器中编写js代码
-
- 在页面中使用js文件
在html中使用js
- Webpack的标准配置文件内容结构
Webpack的标准配置文件
- 开发模式与生成模式
- 还存在一种测试模式
- 开发模式可以实时刷新；
配置开发模式
- 入口配置
配置entroy与打包输出js文件
- Http服务器配置
配置Webpack-dev-server
- 执行脚本配置
配置npm服务器启动执行脚本
- 启动服务器
服务器启动的截图
- 浏览器访问
- 上面设置的是自动打开
-
浏览器访问
使用html-webpack-plugin隐藏js与html的关系
步骤
- 安装插件；
- 代码引入插件；
- 插件配置参数；
- 创建插件对象，并在webpack中配置插件对象；
- 测试插件是否工作；
操作
- 安装
-
插件安装
-
- 配置代码引入插件
-
插件引入
-
- 插件配置
-
配置插件
-
- 设置插件到webpack环境中
-
使用插件
-
- 测试插件
- 启动服务器测试；
- build构建测试；
- 在npm的config.json配置文件中增加一个打包操作指令：
"build": "webpack --config=config/webpack.dev.conf.js" - 执行打包操作：
npm run build
- 在npm的config.json配置文件中增加一个打包操作指令：
- 打包操作的结果：
-
插件工作结果测试
-
- 服务器启动（开发模式可以启动一次，代码修改后实时刷新）
-
开发模式的自动刷新
-
-
注意：
- html-webpack-plugin插件在webpack4.0以后，可以实现零配置：
- template采用默认：
- filename：默认
index.html； - inject：采用默认；
- title不会主动修改HTML的标题，需要手工修改：
{%= o.htmlWebpackPlugin.options.title %}
- html-webpack-plugin插件在webpack4.0以后，可以实现零配置：
-
注意：
- 这里没有直接使用html，而是使用html-webpack-plugin插件把模板插入js转换为html，模板可以随意指定；
使用loader模块化css
- css样式表发展的技术也比较多，除了传统的css，还有sass/less、stylus，这里指介绍与传统css有关的样式。
- css-loader，style-loader
- css-loader：是加载css
- style-loader：使用
- css-loader，style-loader