什么是webpack？
模块化管理及打包工具
Webpack的工作方式：如下图所示，把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
配置项介绍
// “__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");
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 // 实时刷新
},
// loaders
module: {
rules: [ {
test: /(\.jsx|\.js)$/, // 一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
use: {
loader: "babel-loader", // loader的名称（必须）
options: {
presets: [
"env"
]
}
},
exclude: /node_modules/ // include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
}, {
test: /\.css$/,
use: [ {
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
} ]
} ]
},
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" // new 一个这个插件的实例，并传入相关的参数
}),
new webpack.HotModuleReplacementPlugin(), // 热加载插件
new webpack.optimize.OccurrenceOrderPlugin(), // (优化) 为组件匹配ID
new webpack.optimize.UglifyJsPlugin(), // (优化) 压缩js代码
new ExtractTextPlugin("style.css"), // （优化）分离css、js文件
new CleanWebpackPlugin('build/*.*', { // (缓存) 清除缓存，添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多
root: __dirname,
verbose: true,
dry: false
})
]
}| devtool参数 | 说明 |
| source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度； |
| cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便； |
| eval-source-map | 使用 |
| cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点； |
正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。
对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它。cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。