zoukankan      html  css  js  c++  java
  • 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代码,浏览器会自动刷新!成功!
  • 相关阅读:
    leetcode 155. Min Stack 、232. Implement Queue using Stacks 、225. Implement Stack using Queues
    leetcode 557. Reverse Words in a String III 、151. Reverse Words in a String
    leetcode 153. Find Minimum in Rotated Sorted Array 、154. Find Minimum in Rotated Sorted Array II 、33. Search in Rotated Sorted Array 、81. Search in Rotated Sorted Array II 、704. Binary Search
    leetcode 344. Reverse String 、541. Reverse String II 、796. Rotate String
    leetcode 162. Find Peak Element
    leetcode 88. Merge Sorted Array
    leetcode 74. Search a 2D Matrix 、240. Search a 2D Matrix II
    Android的API版本和名称对应关系
    spring 定时任务执行两次解决办法
    解析字符串为泛型的方法
  • 原文地址:https://www.cnblogs.com/twodog/p/12137745.html
Copyright © 2011-2022 走看看