简介
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。
webpack官方指南 https://github.com/webpack/webpack
webpack中文指南 https://doc.webpack-china.org/
1. 项目概述
1.1 文件结构
root (根目录)
——| node_modules (npm依赖项目文件夹)
————| ….
——| src (资源文件)
————| first.js (webpack的入口文件)
——| index.html (页面展示的入口文件,必须有)
——| webpack.config.js (webpack的配置文件,必须有)
——| package.json (定义了这个项目所需要的各种模块)
如图
2.安装环境
2.1 安装 npm
因为nodejs内置了npm,因此只需要安装nodejs即可。
nodejs:https://nodejs.org/en/download/
注意:Webpack 需要 Node.js v0.6 以上支持。
2.2 全局安装webpack
$ npm install webpack -g
3.创建项目结构和依赖
3.1 创建package.json文件
首先在根目录下,打开命令行(win + r),输入如下指令
$ npm init
此时命令行会提一些问题,不用管,一路回车!
package.json
3.2 创建空文件
按照步骤1.1创建项目的文件结构
3.3 安装webpack项目依赖
$ npm install webpack --save-dev
3.4 安装webpack-server服务器
$ npm install webpack-dev-server --save-dev
此时,package.json文件中多出了两个依赖项,那就是我们在步骤3.3以及3.4中安装的。
4.开始使用
4.1 编写webpack配置文件
webpack.config.js(精简版)
var webpack = require('webpack')
module.exports = {
//配置webpack的入口文件(first.js)
entry: './src/first.js',
//配置webpack的输出文件(final.js)
output: {
path: __dirname, //__dirname是指项目的根路径
filename: 'final.js'
}
}
4.2 编写index.html
要注意的是,script标签中的src文件路径,就是webpack.config.js文件中配置的path+filename
output: {
path: __dirname, //__dirname是指项目的根路径
filename: 'final.js'
}
<!DOCTYPE html>
<html>
<head>
<title>展示页面</title>
</head>
<body>
<h1>横线下面是插入的内容</h1><hr>
<script src="./final.js"></script>
</body>
</html>
4.3 编写first.js
document.write("这个是first.js文件插入的内容");
到此项目的所有文件都已经编写完成,接下来就是将文件合并压缩,输出到final.js中,并且可以通过服务器来运行项目啦~
5.编译及运行
5.1 输出fianl.js文件
通过 指令
$ webpack
直接进行文件合并,创建并输出到final.js文件中。
此时,会在根目录下会创建出一个final.js文件
5.2 启动服务器
在根目录下,打开命令行,输入如下指令
# 注意:index.html文件必须在根目录下,否则会有奇效。<( ̄︶ ̄)>
$ webpack-dev-server
如果出现以下图片,恭喜你,已经编译成功。
此时,打开浏览器,在地址栏输入
http://localhost:8080/
效果页面展示:
项目源码: