webpack简易使用指南

来源：互联网发布：win10怎么激活windows 编辑：程序博客网时间：2024/06/07 19:31

简介

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

webpack官方指南 https://github.com/webpack/webpack
webpack中文指南 https://doc.webpack-china.org/

1. 项目概述

1.1 文件结构

如图

这里写图片描述

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/
效果页面展示：

这里写图片描述

项目源码：

https://github.com/yang657850144/webpack

0 0