[html]webpack网页开发打包工具

Posted 2020-10-11

官方文档：https://webpack.js.org/concepts/

中文文档：https://doc.webpack-china.org/guides/installation/

简书简介：http://www.jianshu.com/p/42e11515c10f

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

预先安装node.js

正式安装：

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用之前：

1.定位当一个测试目录，开始项目：

npm init

建一个json文件

2.安装webpack作为依赖包

// 安装Webpack
npm install --save-dev webpack

 

3.回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

 

简要翻译：

了解webpack只需要了解这个四个步骤：

entry,

output,

loaders,

plugins