官网：https://www.webpackjs.com/concepts/

1. webpack简介

webpack 是一个模块打包工具。它使得模块彼此依赖并且可构建等价于这些模块的静态资源。对比于已经存在的模块打包器（module bundler），webpack的开策动机是实现代码分包（Code Splitting ）和通过模块化完成代码的无缝集成。webpack可以按照项目需求合并代码，并且撑持按需加载。

webpack的实现方针是：

拆分依赖树（dependency tree）为多个按需加载的chunk

保证快速首屏加载

每种静态资源都可成为模块

能够将第三方库视作一个模块来措置惩罚惩罚

能够定制模块打包器的几乎任何部分

适合大型项目

2. webpack根基使用

安置webpack之前，请确认node已经安置完毕，且npm承打点器可用。

2.1 全局安置webpack

npm install webpack -g

2.2 全局安置 webpack-dev-server

webpack-dev-server是一个轻量级的处事器，使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，改削文件源码后，自动刷新页面将改削同步到页面上，比传统的http处事对开发越发有效。

npm install webpack-dev-server -g

2.3 项目搭建

在项目的根目录下运行：

npm install webpack --save-dev

在项目根目录下新建webpack.config.js。我们通过这个文件来措置惩罚惩罚控制webpack，给出我们想要的输出。

webpack.config.js的简单的配置如下：

module.exports = { context: __dirname + ‘/src‘, entry: ‘./index/index.js‘, output: { path: __dirname + ‘/build‘, filename: ‘bundle.js‘ } };

2.4 开发调试

项目根目录运行：

webpack-dev-server --progress --colors

此时，访谒： :8080/index.bundle.js 即可访谒到编译之后的js了。

2.5 产品颁布

通过webpack打包颁布，运行：

webpack -p

凭据我们上面的webpack.config.js文件的配置，打包告成之后会生成一个build文件夹，里面会包罗打包好的js文件，集成了所有的依赖库和业务逻辑代码，我们只需将此build文件夹颁布到线上即可。

3. 常用配置 3.1 设置入口

配置那些js需要措置惩罚惩罚，entry有三种写法，每个入口称为一个chunk。

字符串：
entry: "./index/index.js" ：配置模块会被解析为模块，并在启动时加载。chunk名为默认为main， 具体打包文件名视output配置而定。 

数组
entry: [‘./src/mod1.js‘, [...,] ‘./src/index.js‘] ：所有的模块会在启动时 凭据配置挨次 加载，合并到最后一个模块会被导出。chunk名默认为main

东西
entry: {index: ‘...‘, login : [...] }：如果传入Object，则会生成多个入口打包文件， key是chunk名，value可以是字符串，也可是数组。

例如

entry: { index: ‘./index/index.js‘, login: [‘./mod/mod1.js‘, ‘./index/login.js‘] }

3.2 配置输出目录

设置入口配置的文件的输出法则，通过output东西实现，常用设置：

output: { path: __dirname + ‘/build‘, filename: ‘[name]-[id].js‘, publicPath: ‘/asstes/‘ }

此中：

output.path ：指定输出文件路径，凡是设置为__dirname + ‘/build’,

output.filename: 输出文件名称，有下面列出的四种可选的变量。 filename项的配置可以是这几种的任意一种或多种的组合。 如 output.filename = ‘[name]-[id].js’, 则输出就是 index-1.js、 login-2.js。

[id], chunk的id

[name] ,chunk名

[hash], 编译哈希值

[chunkhash] , chunk的hash值

output.publicPath：设置为想要的资源访谒路径。访谒时，则需要通过类似:8080/asstes/index-1.js来访谒资源，如果没有设置，则默认从站点根目录加载。

3.3 设置loader

loader用于加载某些资源文件。因为webpack自己只能打包common.js规范的js文件，对付其他资源如css，img等，是没有步伐加载的，这时就需要对应的loader将资源转化，从而进行加载。

安置loader

npm install xxx-loader --save -dev

此中，XXX为webpack撑持的loader名，常用loader：

a.模板:

　　　　(1)html-loader:将HTML文件导出编译为字符串，可供js识另外此中一个模块

　　　　(2)pug-loader : 加载pug模板

　　　　(3)jade-loader : 加载jade模板(是pug的前身，由于商标问题改名为pug)

　　　　(4)ejs-loader : 加载ejs模板

　　　　(5)handlebars-loader : 将Handlebars模板转移为HTML

　　b.样式:

　　　　(1)css-loader : 解析css文件中代码

　　　　(2)style-loader : 将css模块作为样式导出到DOM中

　　　　(3)less-loader : 加载和转义less文件

　　　　(4)sass-loader : 加载和转义sass/scss文件

　　　　(5)postcss-loader : 使用postcss加载和转义css/sss文件

　　c.脚本转换编译:

　　　　(1)script-loader : 在全局上下文中执行一次javascript文件，不需要解析

　　　　(2)babel-loader : 加载ES6+ 代码后使用Babel转义为ES5后浏览器才华解析

　　　　(3)typescript-loader : 加载Typescript脚本文件

　　　　(4)coffee-loader : 加载Coffeescript脚本文件

　　d.JSON加载:

　　　　(1)json-loader : 加载json文件（默认包罗）

　　　　(2)json5-loader : 加载和转义JSON5文件

　　e.Files文件

　　　　(1)raw-loader : 加载文件原始内容(utf-8格局)

　　　　(2)url-loader : 大都用于加载图片资源,赶过文件巨细显示则以 base64 的方法把文件内容注入到代码中去

　　　　(3)file-loader : 将文件发送到输出的文件夹并返回URL(相对路径)

　　　　(4)jshint-loader : 查抄代码格局错误

　　6.加载框架:

　　　　(1)vue-loader : 加载和转义vue组件

　　　　(2)angualr2-template--loader : 加载和转义angular组件

　　　　(3)react-hot-loader : 动态刷新和转义react组件中改削的部分,基于webpack-dev-server插件需先安置,然后在webpack.config.js中引用react-hot-loader

配置loader