---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：

---

相关定义

JS应用的静态打包工具

grunt/gulp

• 前端自动化任务管理工具
  核心为task，并定义task要处理的事务

webpack

• 模块化开发管理
  附带文件压缩合并，预处理功能

• 依赖node.js环境
  自带软件包管理工具npm(node packages management)

安装步骤

• 先下node.js
• 全局安装webpack：npm install webpack@版本号 -g
• npm init：初始化环境

webpack转换器：loader

• 安装相关loader
  在package.config.js配置

• 加载css样式
  css-loader只负责将css文件加载
  style-loader负责将样式添加到DOM中
  使用多个loader从右到左加载

• 加载图片
  use下的options

• limit
  当加载的图片小于limit时,会将图片编译成base64字符串格式
  大于limit时,需要使用file-loader模块进行加载,打包后dist下会多出对应图片文件
• name: ‘img/[name].[hash:8].[ext]’
  img 文件要打包到的文件夹
  name 获取图片原名字
  hash:8 截取八位hash值
  ext 使用图片原扩展名

• ES6转换为ES5
  使用babel-loader

• 配置Vue

runtime-only -->代码中不能有template，runtime-compiler相反
配置：resolve：alias（别名）

• Vue实例中同时配置el、template
  template中的代码会替代el挂载

webpack功能扩充：plugin

• BannerPlugin：版权声明插件
• 自动生成：html-webpack-plugin
• 压缩插件：uglifyjs-webpack-plugin

文件夹配置

• src（开发代码）
• dist（打包后的发布版本-distribution）
• index.html
  引用dist下的文件
• webpack.config.js（配置文件）
• package.json（项目基本信息）
• main.js (入口)

• package-lock.json（）
  npm install 依据package.json文件导入文件生成

//动态获取目的打包文件路径 
const path = require('path')
module.exports = {
	entry: '源路径',
	output: {
		path: path.resolve(_dirname,'dist'),
		filename:'打包文件名'}
//设置公共url路径头部
		publicPath: 'dist'

1
2
3
4
5
6
7
8
9
10

终端命令

--save--dev开发时依赖

webpack打包

• webpack 源文件 目的文件

npm run 命令名

• 查找在package.json文件下的scripts内的命令
  优先本地环境变量,但在命令行直接执行webpack等命令优先全局

本地webpack配置

• npm install webpack@3.6.0 --save–dev

搭建本地服务器

• 基于node.js，采用express框架
  浏览器自动刷新

npm install webpack-dev-server
在webpack.conifg.js配置devServer

配置文件的分离()

• npm install webpack-merge
  应用时导入webpack-merge
  package.json指定scripts脚本运行路径

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》