webpack和webpack-dev-server安装配置

目录

• webpack和webpack-dev-server安装配置
  • 安装配置步骤:
    • 1.装好node和npm
    • 2.全局安装webpack
    • 3.建立项目、进入项目根目录
    • 4.配置webpack
      • 可在项目根目录下安装(不加-g，在项目根目录出现node_modules文件夹，内含html-web-pack-plugin及其依赖包)，也可全局安装(加-g必须sudo)
    • 5.在项目根目录运行webpack
    • 6.配置webpack-dev-server:
      • 可在项目根目录下安装(不加-g，在项目根目录出现node_modules文件夹,内含webpack-dev-server及其依赖包)，也可全局安装(加-g必须sudo)

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

function generateText() {
    var element = document.createElement('h2');
    element.innerHTML = "Hello h2 world";
    return element;
}
module.exports = generateText;

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 也可以确定是哪个文件名字
    enrty:APP_PATH,
    // 输出的文件名 合并以后的js会命名为bundle.js
    output:{
        path:BUILD_PATH,
        filename:'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件
    },
    // 添加我们的插件 会自动生成一个html文件
    plugins:{
        new HtmlwebpackPlugin({
            titile: '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="/user/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代码，浏览器会自动刷新！成功！