webpack打包jquery多页_用webpack打包老网站（jquery切图）或重构浅谈！

随着前端技术的快速发展，前端技术栈也越来越复杂多样了。什么是webpack？他能干些啥？

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

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;

类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；

Scss，less等CSS预处理器

…

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

很多框架都整合了webpack去打包发布项目，目前熟悉的就是用vue全家桶+webpack打包一个项目。最近两天，因工作空闲，倒腾了下用webpack去打包之前用jquery切的老网站。详情如下：

1、安装吊炸天的Node.js和npm(Node.js的包管理工具)，安装完成后在命令行输入node -v 和 npm -v查看对应的版本号，则说明安装成功。

2、新建一个文件夹whitegold，利用npm或cnpm安装webpack

//先全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

3、安装完成后，在whitegold目录已经生成了一个node_modules的文件夹，里面都是webpack依赖包。然后创建package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。执行命令npm init,输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

4、在文件夹内新建src文件夹， 在src下新建子文件夹css、img、js、view文件夹，在css目录下新建common、lib、page文件夹，在js目录下新建common、page文件夹，最终的目录结构如下

5、在lib文件夹新建reset.css，在page目录下新建style.less公共样式。在js下的page目录下新建index.js,article.js,list.js三个js文件，在view目录下新建index.html, list.html, article.html三个静态页面。里面可以写一些测试代码。因为博主把其三个html文件的公共头部和底部提取出来，所以目录结构如下：

6、创建webpack.config.js配置文件&#x