准备
- Node.js
- NPM or YARN（本文用的yarn）
前端工程化 解决的问题
- JavaScript、CSS代码的合并和压缩
- CSS预处理： Less、Sass、Stylus的编译
- 生成雪碧图(CSS Sprite)
- ES6转ES5
- 模块化
- ...
前端工程化工具--webpack
- 入口 entry
- 出口 output
- 加载器 Loaders
- 插件 Plugins
webpack模块化
将业务中写的各种格式的文件(typescript,less,jpg,vue...)通过特定的加载器(Loader)编译后，最终生成.js,.css,.png等静态资源文件。
模块：在webpack世界里，一张图片、一个css、甚至一个字体，都称为模块(Module)，它们彼此之间存在依赖关系
作用：webpack处理模块之间的依赖关系，并把它们进行打包
主要应用场景
- SPA(单页面富应用)
webpack 基础配置
- 初始化项目
- 安装webpack
- 安装webpack-dev-server（提供服务）
//找到合适的目录下
//新建一个文件夹用于学习webpack
mkdir webpackStudy
// 进入目录
cd webpackStudy
// 初始化 快速回车确认即可
npm init
//成功后 后生成一个package.json文件
// 本地局部安装webpack 指定版本号(2.3.2)
// 注意 这里版本号不同可能会导致后边指令运行出错
yarn add webpack@2.3.2 --save-dev
// 安装成功后package.json中会多一项配置
"dependencies": {
"webpack": "2.3.2"
}
// 本地局部安装webpack-dev-server@2.4.2
//在开发环境中提供：
//启动一个服务器
//热更新
//接口代理
yarn add webpack-dev-server@2.4.2 --save-dev
webpack启动工程
webpack核心-- 一个.js的配置文件,这个配置决定了：架构好坏
//在之前的目录下 （webpackStudy目录）新建一个js文件
touch webpack.config.js
// 打开此文件
open webpack.config.js
// 初始化
// 由于目前没有安装支持ES6的编译插件，暂时不能使用
'export default config';
// webpack.config.js文件内容如下
var config = {
}
module.exports = config
向package.json 中的scripts中添加快速启动webpack-dev-server服务的脚本
(包括打开的局域网ip(不输入则是默认的本地)，打开的端口号(默认8080))
"dev": "webpack-dev-server --host xxx.xxx.xxx.xxx --port 8888 --open --config webpack.config.js"
webpack重要配置 之 入口(Entry) 和 出口(Output)
入口： 告诉webpack从哪里开始寻找依赖，并且编译
出口： 用来配置编译后的文件存储位置和文件名字
新建入口文件 main.js
webpack会从main.js文件开始工作
touch main.js
并且在webpack.config.js中进行入口和出口配置
// webpack.config.js
var path = require('path')
var config = {
entry: {
main: './main'
},
// 打包文件存储为 webpackStudy/dist/main.js
output: {
//path 用来存放打包文件的输出目录
path: path.join(__dirname, './dist'),
// publicPath 资源文件的引用目录
// 如果资源存放在CDN上，这里可以填写CDN的网址
publicpath: '/dist/',
//filename 指定输出文件的名称
filename: 'main.js'
}
}
module.exports = config
新建一个index.html 作为SPA入口
touch index.html
//index.html 内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack study</title>
</head>
<body>
<div id="app">
Hello World
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
现在可以去终端执行
yarn run dev
或者
npm run dev
SPA
由一个html文件和一堆按需加载的js组成