webpack-devServer报错 版本更新

跟着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代码，浏览器会自动刷新！成功！