什么是webpack
webpack是一个模块打包器，包(bundle)就是一个js文件，它把一堆资源合并在一起，以便在同一个文件请求中发回给客户端，webpack还能处理一些浏览器不能直接运行的拓展语言，如Scss,typeScript等。webpack是基于配置型的构建工具，它把整个项目作为一个整体，通过一个给定的主文件（如index.js），从这个主文件开始找到项目所有的依赖文件，使用loaders处理它们，最终打包为一个或多个浏览器可识别的js文件。
webpack和gulp的区别
webpack:作为一个智能解析器，几乎可以处理任何一个第三方的库，无论是commonjs，amd还是普通的js文件，甚至加载依赖的时候可以动态表达式。webpack是一种预编译的解决方案，不需要在浏览器中加载解释器，而且不管是AMD/CMD/ES6风格的模块化，它都认识，并且能编译成浏览器认识的JS。webpack是一种模块化的解决方案，webpack在很多场景下可以替代gulp/grunt类的工具
gulp:在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤，工具之后可以在自动替你完成这些任务。gulp是一个能够优化前端的开发流程的工具。
使用webpack
项目环境
//全局安装 npm install -g webpack //安装到项目里 npm install --save-dev webpack
如果项目中没有package.json这个文件，可以通过以下指令创建：
npm init
一个简单的配置文件
webpack.config.js
// 一个常见的`webpack`配置文件 const webpack = require(‘webpack‘); const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘); module.exports = { entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", //打包后的文件存放的地方 filename: "bundle-[hash].js" //打包后输出文件的文件名 }, devtool: ‘none‘, devServer: { contentBase: "./public", //本地服务器所加载的页面所在的目录 historyApiFallback: true, //不跳转 inline: true, hot: true }, module: { rules: [{ test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [{ loader: "css-loader", options: { modules: true, localIdentName: ‘[name]__[local]--[hash:base64:5]‘ } }, { loader: "postcss-loader" }], }) } } ] }, plugins: [ new webpack.BannerPlugin(‘版权所有，翻版必究‘), new HtmlWebpackPlugin({ template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数 }), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin("style.css") ] };
配置分析
一 entry和output
entry用来定义入口文件，可以是字符串或数组或对象
1.字符串：
module.exports = { entry: ‘./main.js‘ };
2.数组：除了main.js作为入口js之外，还有一个是用来配置webpack提供的一个静态资源服务器webpack-dev-server，它会监控项目中每个文件的变化，实时构建，并自动刷新页面。
module.exports = { entry: [ ‘webpack/hot/only-dev-server‘, ‘./main.js‘ ] };
3.对象：将不同的文件按需构建，按需使用
module.exports = { entry: { a: ‘./a.js‘, b: ‘./b.js‘ } };
output用于定义构建后的文件的输出，是个对象，其中包含了path和filename
module.exports = { output: { path: ‘./build‘, filename: ‘bundle.js‘ } };
二 devtool
devtool属性可以配置调试代码的方式，有多种调试方式，一般只在开发时使用，生产环境下应该将值设置为false。常用值有两个：
eval: 可以设断点调试，不显示信息，每个js模块代码用eval()执行，并且在生成的每个模块代码尾部加上注释，不 会生成.map文件。
source-map: 可以设断点调试，不显示列信息，生成相应的.Map文件，并在合并后的代码尾部加上注释//# sourceMappingURL=**.js.map，可以看到模块代码并没有被eval()包裹，此种模式并没有将调试信息放入打 包后的代码中，保持了打包后代码的简洁性.
| 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选项具有相似的缺点； |
上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。cheap-module-eval-source-map推荐在大型项目考虑时间成本时使用，对小到中型的项目中，eval-source-map是一个很好的选项。
三 devserver
如果想让你的浏览器监听你的代码修改，并自动刷新显示修改后的结果，webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过这是一个单独的组件，在webpack进行配置之前需要单独安装它作为项目依赖。
npm install --save-dev webpack-dev-server
devserver有一些配置选项，可以参考如下的配置：
| devserver的配置选项 | 功能描述 |
| contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录 |
| port | 设置默认监听端口，如果省略，默认为”8080“ |
| inline | 设置为true，当源文件改变时会自动刷新页面 |
| historyApiFallback | 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html |
module.exports = { devtool: ‘eval-source-map‘, entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 } }
四 Babel
Babel是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：
- 让你能使用最新的JavaScript代码(ES6,ES7),而不用管新标准是否被当前使用的浏览器完全支持；
- 让你能使用基于JavaScript进行拓展的语言，如React的JSX;
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 }, devtool: ‘eval-source-map‘, devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader", options: { presets: [ "env", "react" ] } }, exclude: /node_modules/ } ] } };
现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。
五 module
module主要是用来配置加载器(loaders)。webpack本身只能处理javascript模块，如果要处理其他类型的文件，就需要使用loader进行转换，每一种文件会用不同的加载器处理。
loadres,preLoadres,postLoaders的配置主要包括以下几项：
- test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
- loader: loader的名称（必须）
- include/exclude: 手动添加必须处理的文件/文件夹，或屏蔽不需要处理的文件/文件夹（可选）
- query: 为loaders提供额外的设置选项（可选）
module: { exprContextCritical: false, rules: [ { test: /\.ts$/, enforce: ‘pre‘, loader: ‘tslint-loader‘, exclude: /target/ }, { test: /\.tsx?$/, use: [ { loader: ‘babel-loader‘, options: { cacheDirectory: ‘./.babelcache/‘, plugins: [‘angularjs-annotate‘] } } ], enforce: ‘post‘, exclude: createBabelExclude() }, { test: /\.json$/, loader: ‘json-loader‘ }, { test: /\.html$/, loader: ‘html-loader‘ }, { test: require.resolve(‘highcharts‘), loader: ‘expose-loader?Highcharts‘ } ] }
六 resolve
resolve用来配置文件路径的指向。可以定义文件跟模块的默认路径及后缀等，节省webpack搜索文件的时间、优化引用模块时的体验。常用的包括alias,extensions,root,moduleDirectories属性。
- alias: 是个对象，把资源路径重定向到另一个路径
- extensions: 是个数组，定义资源的默认后缀，比如定义后引用a.js、b.json、c.css等资源可以不用写后缀名直接写a、b、c
- root: 是个数组，通过绝对路径的方式来定义查找模块的文件夹。可以是一个数组，主要是用来增加模块的搜寻位置使用的。root 的值必须是绝对路径，使用path.resolve设置。
- modulesDirectories： 是个数组，用来设置搜索的目录名的，默认为["web_modules", "node_modules"]
resolve: { //查找module的话从这里开始查找 root: ‘E:/github/flux-example/src‘, //绝对路径 //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名 extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘], //模块别名定义，方便后续直接引用别名，无须多写长长的地址 alias: { AppStore : ‘js/stores/AppStores.js‘,//后续直接 require(‘AppStore‘) 即可 ActionType : ‘js/actions/ActionType.js‘, AppAction : ‘js/actions/AppAction.js‘ } }
七 plugins
插件是用来拓展webpack的功能的，会在整个构建过程中生效，执行相关的任务。Loadres和Plugins是完全不同的，loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less),一次处理一个，插件并不是直接操作单个文件，它直接对整个构建过程起作用。webpack有很多内置插件和第三方插件。使用某个插件，先用npm安装，然后在webpack配置的plugins关键字部分添加该插件的一个实例。
比如常用的HtmlWebpackPlugin，这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
安装：
npm install --save-dev html-webpack-plugin
这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些更改：
(1)移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。
(2)在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的css,js，favicon等文件.
index.tmpl.html中的模板源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id=‘root‘> </div> </body> </html>
(3)新webpack的配置文件，方法同上,新建一个build文件夹用来存放最终的输出文件
const webpack = require(‘webpack‘); const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/build", filename: "bundle.js" }, devtool: ‘eval-source-map‘, devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }, { loader: "postcss-loader" } ] } ] }, plugins: [ new webpack.BannerPlugin(‘版权所有，翻版必究‘), new HtmlWebpackPlugin({ template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数 }) ], };
执行npm start，可以发现build文件夹下面生成了bundle.js和index.html
介绍一些常用的插件：
| 插件 | 作用 |
| extract-text-webpack-plugin | 第三方插件，将 CSS 打包成独立文件，而非内联。 |
| HotModuleReplacementPlugin | 代码热替换 |
| HtmlWebpackPlugin | 生成 HTML 文件，配合 ExtractTextPlugin 可以加入打包后的 js 和 css。 |
| NoErrorsPlugin | 报错但不退出 webpack 进程。 |
| DefinePlugin | 主要用来定义全局的环境变量，以便我们在自己的程序中引用它。 |
代码热替换
代码热替换在开发的时候无需刷新页面即可看到更新，只在开发环境的配置文件使用，具体配置如下。
npm install --save-dev webpack-dev-server webpack-dev-middleware express
把webpack/hot/dev-server加入到 webpack 配置文件的 entry 项:
<!-- webpack.config.dev.js --> entry: [ ‘webpack-dev-server/client?http://localhost:3000‘, ‘./src/app.js‘ ],
把new webpack.HotModuleReplacementPlugin()加入到 webpack 配置文件的 plugins 项:
<!-- webpack.config.js --> plugins: [ new webpack.HotModuleReplacementPlugin() ]
在项目根目录新建个server.js文件，将server部分分离到一个单独的 ：
<!-- server.js --> var webpack = require(‘webpack‘); var WebpackDevServer = require(‘webpack-dev-server‘); var config = require(‘./webpack.config‘); var compiler = webpack(config); var server = new WebpackDevServer(compiler, { publicPath: config.output.publicPath, hot: true, historyApiFallback: true, stats: { colors: true, hash: false, timings: true, chunks: false, chunkModules: false, modules: false } }); server.listen(3000, ‘localhost‘, function(err, result) { if (err) { return console.log(err); } console.log(‘Listening at http://localhost:3000/‘); });
在 package.json 中定义启动监听热加载：
<!-- package.json --> "scripts": { "start": "node server.js" }
现在你可以通过运行npm start启动服务器。
