Introduction to Webpack
webpack是什么？
webpack是一个模块打包工具。
用vue项目来举例：浏览器它是只认识js，不认识vue的。而我们写的代码后缀大多是.vue的，在每个.vue文件中都可能html、js、css甚至是图片资源；并且由于组件化，这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别，我们就要使用webpack将它们打包成js文件以及相应的资源文件。
hello.js
console.log("hello run")main.js
console.log("main run");
require("./hello.js")main.js中导入了hello.js，它们之间有导入关系。我们假如直接将main.js放到html中是会报错的。
<!DOCTYPE html>
<html>
<head>
<title>webpack demo</title>
</head>
<body>
<h1>webpack</h1>
<script src="main.js"></script>
</body>
</html>//输出结果
main run
Uncaught ReferenceError: require is not defined at main.js:2如果我们要维持这种依赖关系我们就必须使用打包工具进行打包。在命令行中输入：
// 安装webpack
$ npm install webpack -g
// 打包main.js
$ webpack main.js bundle.js然后我们会发现项目中多了一个bundle.js文件，我们在html中导入这个js文件。
index.html
<!DOCTYPE html>
<html>
<head>
<title>webpack demo</title>
</head>
<body>
<h1>webpack</h1>
<script src="bundle.js"></script>
</body>
</html>//输出结果
main run
hello runwebpack.config.js
webpack.config.js文件是webpack的默认配置文件。
$ webpack entry.js output.js
const webpack = require("webpack")
module.exports = {
//配置webpack的入口文件
//示例中webpack会将与entry.js有关的资源都进行打包
entry: {
entry: "./app/entry.js",
},
//出口文件，即打包好的文件的存放地址和文件名。
output:
{
path: __dirname + "/dist",
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
]
}
}单文件，单输出
const webpack = require("webpack");
module.exports = {
context: __dirname + "/src",
entry: {
app: "./app.js",
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};多文件，单输出
const webpack = require("webpack");
module.exports = {
context: __dirname + "/src",
entry: {
app: ["./home.js", "./events.js", "./vendor.js"],
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};多文件，多输出
const webpack = require("webpack");
module.exports = {
context: __dirname + "/src",
entry: {
home: "./home.js",
events: "./events.js",
contact: "./contact.js",
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};loaders
loader是webpack的加载器，可以帮我们处理各种非js文件。如css样式，vue、jsx、weex等后缀的代码，JPG、PNG图片等。所以我们一般会在package.json中看到各种***-loader。这些就是各类资源的loader加载器。
参考文档：https://github.com/violetjack/FEProjectDemos