1.生成Source Maps（使调试更容易）
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" ????????????}} ???2.使用webpack构建本地服务器
它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
npm install --save-dev webpack-dev-server
| devserver的配置选项 | 功能描述 |
|---|---|
| contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录） |
| 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//实时刷新 ?} }
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"scripts": { ???"test": "echo \"Error: no test specified\" && exit 1", ???"start": "webpack", ???"server": "webpack-dev-server --open" ?},运行npm run server
3.Loaders
3.1 安装Babel
// npm一次性安装多个依赖模块，模块之间用空格隔开npm install --save-dev babel-core babel-loader babel-preset-es2015 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: [ ???????????????????????????"es2015", "react" ???????????????????????] ???????????????????} ???????????????}, ???????????????exclude: /node_modules/ ???????????} ???????] ???}};
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）loader：loader的名称（必须）include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；query：为loaders提供额外的设置选项（可选）
webpack打包流程进阶
原文地址：http://www.cnblogs.com/zptop/p/7551071.html