这几天稍微研究了下webpack，虽然知道的不多，但也稍微记录下心得。webpack作为时下非常流行的打包工具，还是有必要掌握的。
闲话不说了，直接进入正题，这里只是简单的介绍操作流程，想了解原理的自己百度。
首先你需要下载安装nodejs（建议下载git客户端执行命令，比较好用）
安装webpack
npm install -g webpack
开始
这里我在电脑上新建了一个webpack文件夹:
在目录下我首先新建index.html
<html> <head> <meta charset="utf-8" /> </head> <body> <script src="./bundle.js"></script> </body> </html>
接着新建一个index.js
docume.write("test webpack");
接着我们执行 webpack ./index.js bundle.js ,执行完成后我们会发现目录下生成了一个bundle.js,我们将这个js引入到index.html中。
用浏览器打开index.html，显示 test webpack
再添加一个文件 content.js
module.exports = "it works from content.js"
更新index.js
document.write(require("./content.js"))
在执行一下命令
webpack ./index.js bundle.js
刷新浏览器
添加loader
添加css文件，webpack原生仅支持javascript，所以我们需要css-loader来处理css文件，同时我们也需要style-loader来应用这些样式。
运行 npm install css-loader style-loader 安装loader，这会在你的目录下生成node_modules文件夹。
添加 style.css 文件
body{ background: yellow; }
更新index.js
require("!style!css!./style.css");
document.write(require("./content.js"));
再次执行 webpack ./index bundle.js,刷新浏览器会发现背景变为黄色
配置文件
每次都写 require("!style!css!./style/css");是一件很麻烦的事情，我们可以在配置文件中写入这些配置
添加webpack.config.js
module.exports = {
entry: "./index.js",
output:{
path:__dirname,
filename:"bundle.js"
},
module:{
loaders: [
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
}
}
更新index.js
require("./style.css");
document.wirte(require("./content.js"));
执行 webpack, webpack 总会尝试载入当前目录中的webpack.config.js文件
整个流程执行完毕
我们可以一开始就写好webpack.config.js,然后执行，npm install。打开index.html
具体流程如下
执行npm init生成package.json ，编辑package.json
{ "name": "package.json", "version": "1.0.0", "description": "今天来简单的介绍下webpack的基本使用", "main": "index.js", "dependencies": {}, "devDependencies": { "css-loader": "~0.9.0", "style-loader": "~0.8.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "enochjs", "license": "ISC" }
执行npm install,加载依赖文件
执行webpack 生成bundle.js
在浏览器中打开index.html
