WebPack

一、WebPack：https://www.webpackjs.com/concepts/

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

二、为什要使用WebPack：

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

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

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

c:scss，less等CSS预处理器

.........

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

　　Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

其中，Webpack 的两个最核心原理分别是：

1. 一切皆模块
2. 按需加载（例如 java中的导包）

当然 Webpack 的作用不止加载模块这么简单，前端的常用需求通常都可以实现：利用 Loader 转换 es6 、 Less 、 Typescript ，还可利用插件 开发多页面应用,等等诸多强大功能。

三、安装：

（注意：

　　npm 是什么？

　　npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

　　下面是关于 npm 的快速介绍：

　　npm 由三个独立的部分组成：

• 网站
• 注册表（registry）
• 命令行工具 (CLI)

　　　　网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。

　　　　注册表 是一个巨大的数据库，保存了每个包（package）的信息。

　　　　CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。）

1、全局安装：

　　npm install -g webpack@3

2、局部安装：

　　npm install --save-dev webpack@3 进入项目下安装

3、配置package.json文件，将文件夹打包成npm包 　　　　npm init -y

安装该插件： npm install css-loader style-loader

四、webpack打包文件步骤：

1、在项目下创建一个webpack.config.js文件；

2、对webpack.config.js文件进行配置工作:

　　在项目下创建一个入口文件src文件，该目录中创建一个入口文件xx.js;

　　在项目下创建一个出口文件dist目录，该目录下的出口文件会通过webpack执行生成;

3、项目下创建一个html文件，连入出库的bundle.js文件;

4、执行webpack;

　　项目根目录下，配置webpack.config.js文件，也就是配置入口和出口：

var path = require("path");
//模块的暴露
module.exports = {
    entry : "./src/entry.js",// 入口文件配置项
    output:{
            path:path.resolve(_dirname,"dest"),//出口文件的路径一般都用绝对路径
            filename : "bundle.js"
    }
}

5、测试打包项目：

目录结构：

通过： 　　npm run dev (在package.json中配置好 Scripts:{"dev":"webpack"} )

6、实现打包多个相互依赖的JS文件过程：

通过 require() 方法 在入口文件中引用

module.exports = {     }    模块暴露

7、样式的打包：

　　通过安装loader加载器，可以将静态的样式文件一同打包到bundle.js文件中，通过下面命令安装加载器

　　安装该插件：

　　　　　　npm install css-loader style-loader 

在entry.js 中导入样式：

　　　　require("!style-loader!css-loader!../css/tyle.css)； 静态资源导入需要加！，必须先导入style-loader

8、实现自动监听项目配置文件，不需要每次手动运行 npm run dev

核心思想： 修改package.json文件

“build”："webpack --watch"  此时运行 npm run build 即可实现自动监听

详情：https://refined-x.com/2017/06/16/Webpack是答案吗/（侵删）及https://www.cnblogs.com/-walker/p/6056529.html（侵删）