webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）

link：http://www.cnblogs.com/wuzhiquan/p/6724349.html

目录
安装配置步骤：
1. 装好node和npm
2. 全局安装webpack
3. 建立项目，进入项目根目录
4. 配置Webpack
5. 在项目根目录运行webpack
6. 配置webpack-dev-server：

 

跟着Webpack傻瓜式指南（一）这个教程在安装webpack和webpack-dev-server的时候遇到很多问题，查了很多终于一一找到解决办法。

主要参考了这三篇博文：

　　moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

　　创建Webpack简单项目遇见的那些事儿

　　webpack-dev-server 使用方法，看完还不会的来找我~

看到网上很多人也遇到同样这些问题，特写这篇博文，简要总结安装过程并穿插问题解决办法，希望能给大家带来一些帮助。

回到顶部

安装配置步骤：

1. 装好node和npm

2. 全局安装webpack

npm
install -g webpack

3. 建立项目，进入项目根目录

a. 新建一个package.json的文件在项目根目录下

npm
init

b. 添加webpack.config.js配置文件

c. 添加app文件夹，内含2个js文件

sub.js

//我们这里使用CommonJS的风格
function generateText() {
　　var element = document.createElement('h2');
　　element.innerHTML = "Hello h2 world";
　　return element;
}
module.exports = generateText;

index.js

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

4. 配置Webpack

a. 安装html-webpack-plugin，快速生成HTML

npm
install html-webpack-plugin --save-dev

可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含html-web-pack-plugin及其依赖包），也可全局安装（加-g 必须sudo）

b. 写webpack.config.js配置文件中的内容

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: APP_PATH,
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: BUILD_PATH,
filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件
},
//添加我们的插件 会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
})//在build目录下自动生成index.html，指定其title
],
};

5. 在项目根目录运行webpack

webpack

a. Error: Cannot find module 'webpack/../../.....'
解决1：在本项目中安装webpack：

npm
install webpack

解决2：修改环境变量

touch
~/.bash_profile

vim
~/.bash_profile

修改打开的.bash_profile文件：

export NODE_PATH="/usr/local/lib/node_modules"

使修改生效 

source
~/.bash_profile

b. 若命令为

webpack --watch

，动态监听文件的改变并实时打包，输出新bundle.js文件；但不能做到hot
replace，即每次webpack编译之后，还需手动刷新浏览器

6. 配置webpack-dev-server：

a. webpack-dev-server简介：
是一个小型node.js express服务器
新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器
启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。
两种自动刷新方式：
iframe mode

在网页中嵌入了一个 iframe ，将我们自己的应用注入到这个 iframe 当中去，因此每次你修改的文件后，都是这个 iframe 进行了 reload

命令行：

webpack-dev-server

，无需

--inline

浏览器访问：http://localhost:8080/webpack-dev-server/index.html
inline mode

命令行：

webpack-dev-server
--inline

浏览器访问：http://localhost:8080

b. 安装webpack-dev-server

npm
install webpack-dev-server --save-dev

可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）

c. 在webpack.config.js中添加配置

var webpack=require('webpack');
module.exports = {
……
devServer: {
historyApiFallback: true,
inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},
plugins:[
……
new webpack.HotModuleReplacementPlugin()
]
……
};

d. 在package.json里配置运行的命令（npm支持自定义一些命令）

"scripts":
{
　　"start": "webpack-dev-server --inline"//注意：不写--hot，否则浏览器无法自动更新
},

e. 运行server

npm
start

Error: .........（此处省略一堆错误）
解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）

npm
install webpack

浏览器打开http://localhost:8080/

成功运行，且修改app中的js代码，浏览器会自动刷新！成功！