此处参考简书文章
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法。
模块化，让我们可以把复杂的程序细化为小的文件;类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；Scss，less等CSS预处理器…使用npm init 可以自动创建这个文件，终端会问你一些问题，如项目名称，项目版本等，先回车填入默认值。注意到有一行命令是entry point: (index.js) ，后文会解释这个东东。 生成的文件如下：
// package.json { "name": "demos", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.11.0" } }安装后发现多了一个nodes_modules 文件夹。
按如下项目结构创建文件和文件夹。app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。
在html文件中写入最基础的html，引入打包之后的js文件boudle.js
<!DOCTYPE html> <html lang = 'en'> <head> <meta charset="utf-8"/> <title>hello world</title> </head> <body> <div id = 'root'></div> <script src = 'bundle.js'></script> </body> </html>hello.js 中导出模块。
var greet = function() { var greet = document.createElement('div') greet.textContent = 'hello world' return greet } module.exports = greet`main.js’ 引入模块
const greeter = require('./hello.js') document.querySelector('#root').appendChild(greeter())本例中输入webpack app/main.js public/bundle.js ，可以看到Webpack同时编译了main.js 和hello.js 。
Hash: eb127812ae4d6d4f9755 Version: webpack 3.11.0 Time: 66ms Asset Size Chunks Chunk Names bundle.js 2.79 kB 0 [emitted] main [0] ./app/main.js 93 bytes {0} [built] [1] ./app/hello.js 148 bytes {0} [built]Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如前面提到的，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。
在demos文件夹下新建一个webpack.config.js 文件，在这个文件中配置入口文件路径和打包后文件的存放路径。
module.exports = { entry: __dirname + '/app/main.js', // 唯一入口文件 output: { path: __dirname + '/public', // 打包后的文件输出路径 filename: 'bundle.js' // 打包后输出的文件名 } }[Note] ：__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。 有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项。 命令：
webpack # 最基本启动webpack方法，默认查找名称为webpack.config.js的文件 webpack --config webpack.config.js # 指定配置文件 webpack -p # 对打包后的文件进行压缩 webpack -d # 提供source map，方便调试代码是不是简便很多呢？还有一种方法，连webpack 这一个命令都不用输入。
在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。
{ "name": "demos", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack" }, "author": "young", "license": "ISC", "devDependencies": { "webpack": "^3.11.0" } }输入命令npm start ，可以看到就相当执行了命令webpack。
$ npm start > demos@1.0.0 start G:\BaiduYunDownload\demos > webpack[Note]: package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。
开发总是离不开调试，方便的调试能极大的提高开发效率，不过有时候通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮我们解决这个问题的，它提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。
在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
devtool选项配置结果source-map在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；cheap-module-source-map在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；eval-source-map使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；cheap-module-eval-source-map这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点。正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。
对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它。 继续配置webpack.config.js：
module.exports = { devtool: 'eval-source-map', entry: __dirname + '/app/main.js', output: { path: __dirname + '/public', filename: 'bundle.js' } }想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。 devserver作为webpack配置选项中的一项，以下是它的一些配置选项，更多配置可参考这里
devserver的配置选项功能描述contentBase默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public”目录）port设置默认监听端口，如果省略，默认为8080inline设置为true，当源文件改变时会自动刷新页面historyApiFallback在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html在webpack.config.js 文件中配置devServer：
devServer: { contentBase: './public', historyApiFallback: true, // 跳转 inline: true // 实时刷新 }在package.json 中，为scripts 对象添加命令：
"server": "webpack-dev-server --open"在终端输入npm run server，可在本地8080 端口查看结果：
官网描述：loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！ Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：
参数描述text（必须）用于匹配loaders所处理文件的拓展名（就是.xx）的正则表达式loader（必须）loader的名称include/exclude（可选）手动添加必须处理的文件/文件夹，或屏蔽不需要处理的文件/文件夹query（可选）为loader提供额外选项e.g. 处理JSON文件 webpack1.* 配置json-loader。而webpack2.* 和webpack3.* 版本已经内置处理JSON文件。把前文的例子中的问候信息写在app 文件夹中的config.json 文件。
// config.json { "greetText": "hello world from JSON!" }可以在hello.js 直接导入这个JSON文件，访问它的内容。
var config = require('./config.json') var greet = function() { var greet = document.createElement('div') greet.textContent = config.greetText return greet } module.exports = greetBabel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：
让你能使用最新的JavaScript代码（ES6，ES7…），而不用管新标准是否被当前使用的浏览器完全支持；让你能使用基于JavaScript进行了拓展的语言，比如React的JSX。…我们先安装几个依赖包：
babel-core 核心功能包babel-preset-env 解析ES6包babel-preset-react 解析JSX文件 // npm一次性安装多个依赖模块，模块之间用空格隔开 npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react配置Babel（在webpack.config.js 文件中）：
module: { rules: [ { test: /(.jsx|.js)$/, use: { loader: 'babel-loader', options: { presets: [ 'env', 'react'] } }, exclude: /node_modules/ } ] }现在webpack已经支持ES6语法和react的语法了。安装react 和react-dom，测试一下~
npm install --save react react-dom使用ES6语法，更新hello.js 文件：
import React, { Component } from 'react' var config = require('./config.json') class Greeter extends Component{ render() { return ( <div> {config.greetText} </div> ); } } export default Greeter修改main.js：
import React from 'react' import {render} from 'react-dom' import Greeter from './hello' render(<Greeter/>, document.getElementById('root'))最后，重新npm start 打包。
Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为.babelrc 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：
// webpack.config.js module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ } ] } //.babelrc { "presets": ["react", "env"] }webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
先安装这两个包
npm install --save-dev style-loader css-loader配置
module: { rules:[ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, ] }被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。 具体配置
{ test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true, // 启用css modules localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css类名格式 } } ] }在app 文件夹下新建一个greeter.css
.root { background-color: #eee; padding: 10px; border: 3px solid #ccc; }在hello.js 中导入这个css模块
import React, { Component } from 'react' var config = require('./config.json') // 导入css模块 import styles from './greeter.css' class Greeter extends Component{ render() { return ( <div className = { styles.root }> {config.greetText} </div> ); } } export default Greeter结果：
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
e.g. 添加版权声明的插件
const webpack = require('webpack'); module.exports = { // ... module: { // ... }, plugins: [ new webpack.BannerPlugin('版权所有，翻版必究') ] }在打包后的文件bundle.js可以看到版权信息：
npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install--save另一个是 npm install –save-dev，他们表面上的区别是： --save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下。譬如：
{ "dependencies": { "vue": "^2.2.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-latest": "^6.0.0", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } }npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的，比如 我们安装 js的压缩包gulp-uglify 时，我们采用的是 npm install –save-dev gulp-uglify 命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
