webpack 安装使用教程
1、我最该浒拄郎近大量使用的是 jspm，但因为用它搭建的前端开发环境中，写测试代码非常困难，而项目又需要写测试，所以决定先试试 webpack。安装 webpackwebpack 是一个 npm 包，所以我们通过 npm 命令来全局安装：npm install webpack -g安装完成后，命令行下就有 webpack 命令可用，执行 webpack --help 可以查看 webpack 提供的各种命令。初始化项目grunt.js 一类工具可以借助 yeoman 来初始化项目，目前我并没有看到 webpack 有类似方法，所以当 node.js 项目来初始化。npm init 创建一个 package.json 文件npm install webpack --save-dev 在当前目录下安装局域的 webpack完成以上两个步骤后，我们的项目下有一个 package.json 文件，一个 node_modules 文件夹，我们还需要一个 index.html 文件，内容如下：
2、我们的代码将组织在 JavaScript 模块中，项目会有一个入口（entry）文件，比如 main.js，我们需要通过 webpack 的配置文件指明它的位置。在根目录新建一个 webpack.config.js 文件，添加如下内容：
3、因为我们在项目部署前需要打包合并 js 文件，所以还需要在 webpack.config.js 中配置一个 output：module.exports = { entry: './main.js', output: { path: __dirname, filename: 'bundle.js' }}output 定义我们打包出来的文件位置及名称。
4、完成以上后，试着在项目根目录下执行 webpack 命令，我们的根目录下会多出一个 bundle.js 文件：webpack build自动刷新到现在为止，我们还没在浏览器中打开 index.html 文件，实际上，我们连 bundle.js 文件都还没加入 index.html 文件中。现在且先加入：<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>webpack 教程</title></head><body> <script src=./bundle.js></script> <!-- 在 index.html 文件中添加这一行代码 --></body></html>
5、安装 webpack颍骈城茇-dev-server执行 npm install webpack-dev-server -g 在全局环境中安装 webpack-dev-server在项目根目录下执行道药苍嗓命令：$ webpack-dev-server这样，我们就可以在默认的 http://localhost:8080 网址上打开我们的项目文件了。此时，我们可能会认为，js 文件修改webpack-dev-server 监控到变化webpack 重新编译实时更新浏览器中的页面但不幸的是，我们「自以为是」了。http://localhost:8080 这个网站对 js 文件的变化无动于衷。我们可以启用 webpack-dev-server 的 hot 模式，在代码中插入如下一行：<script src=http://localhost:8080/webpack-dev-server.js></script>这样 http://localhost:8080/ 这个网址也可以根据 js 的变化相应地自动刷新了。
