• webpack和webpack-dev-server安装配置


    本文转载自:https://www.cnblogs.com/xuehaoyue/p/6410095.html

    跟着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代码,浏览器会自动刷新!成功!
  • 相关阅读:
    U盘支持启动windows和Linux
    emacs安装
    npm 安装指定的第三方包
    npm安装第三方包
    npm 安装淘宝镜像
    ssm 环境搭建
    gitBook安装简介
    git 博客搭建
    git 多人开发
    git ssh提交
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/8182508.html
Copyright © 2020-2023  润新知