webpack 修改html热部署_webpack4 html热部署 - CSDN
精华内容
参与话题
  • 在前端多页面(多html)开发的时候,使用webpack进行HMR热部署,但每一次修改之后,热部署持续很长的时间,而且页面越多,时间越长,观察可知大部分时间花在 asset optimization 这一步。每次修改都会触发所有页面的...

    问题

    在前端多页面(多html)开发的时候,使用webpack进行HMR热部署,但每一次修改之后,热部署持续很长的时间,而且页面越多,时间越长,观察可知大部分时间花在 asset optimization 这一步。每次修改都会触发所有页面的重新构建,但其实我们只需要更新修改的页面即可。

    原因

    使用 vue-cli 等脚手架搭建的时候,会默认在 webpack.dev.conf.js 中配置 html-webpack-plugin  模块,对于多页面,它需要配置所有页面,所以每次都会对所有 html 进行处理。

    ...
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    ...
    
    for(let pathName in pages){
      let options = {
        filename: `${pathName}.html`,
        template: pages[pathName],
        inject: true,
        chunks: [pathName]
      }
      // 需要配置所有 html,但因此热部署也需要扫描所有 html
      devWebpackConfig.plugins.push(new HtmlWebpackPlugin(options))
    }

    建议的解决方法

    网上看到某种很笨拙的解决方法,为了不误导,我就不贴链接和方法了,你可能之前有阅读过。这个 bad idea 大概如下:

    在 webpack 配置 html-webpack-plugin 只想要热部署的 html 页面

    这确实有效,但是每次都要去修改配置,有时候粗心还可能导致这个修改提交到 git/svn,影响其他人的开发。

    解决方法

    使用 html-webpack-plugin-for-multihtml 代替 html-webpack-plugin  模块,并且加上 multihtmlCache

    ...
    const HtmlWebpackPlugin = require('html-webpack-plugin-for-multihtml')    // 替换组件
    ...
    
    for(let pathName in pages){
      let options = {
        filename: `${pathName}.html`,
        template: pages[pathName],
        inject: true,
        chunks: [pathName],
        multihtmlCache: true    // 解决多页热部署的关键
      }
      devWebpackConfig.plugins.push(new HtmlWebpackPlugin(options))
    }

    修改后可以显著提升热部署速度

    展开全文
  •  (2):实现自动部署,热部署; (3):使用代理获取后台数据,实现前后端完全分离;工具: webstorm、Chrome浏览器实现: (1):安装webstorm,网上大把下载。(本人用的2017版本) (2):安装node.js,度...

    目标:

            (1):使用node.js及其插件,搭建一个可运行的前端项目;

            (2):实现自动部署,热部署;

            (3):使用代理获取后台数据,实现前后端完全分离;

    工具:

            webstorm、Chrome浏览器

    实现:

            (1):安装webstorm,网上大把下载。(本人用的2017版本)

            (2):安装node.js,度娘相当强。(本人使用8.1.1)

            (3):使用webstorm新建一个demo项目。如图:


            (4):初始化项目。

            打开webstorm左下角的Terminal。运行npm命令对项目进行初始化。初始化完成之后,会生成一个项目文件package.json。

    npm init

            初始化完成后在项目根目录下新建一个html文件和一个js文件作为入口文件,名称自定义。

           (5):安装webpack。

    npm install --save-dev webpack

            等待安装完成后,在项目根目录下新建一个  webpack.config.js。该js为webpack配置文件

    var path = require('path');
    var webpack = require('webpack');
    module.exports = {
        entry: './index.js',                    //入口js文件即可
        output: {
            path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
            filename: "bundle.js"               //输出js名称
        },
        module: {
            rules: []
        }
    };

            (6):安装服务器插件。

    npm install live-server -g  
    npm install webpack-dev-server --save-dev
    npm install webpack-cli -D

            安装服务器插件完成之后需要修改  webpack.config.js配置文件。新增server配置即可

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

    修改后的 webpack.config.js 

            (7):配置启动命令。

        修改 package.json ,新增start命令。

    {
      "name": "demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack-dev-server --inline"
    },
      "keywords": [
        "demo"
      ],
      "author": "zhuhao",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14",
        "webpack-dev-server": "^3.1.3"
      }
    }

        现在我们执行  npm start  等待项目启动。

    npm start

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

            (8):配置 npm start 项目时,自动打包自动打开浏览器。

        配置自动打开浏览器的配置:在 package.json 内scripts内start 添加代码

    // Windows
    "start":"start http://localhost:8081"
    
    // Mac
    "start":"open http://localhost:8081"
    
    // Linux
    "start":"xdg-open http://localhost:8081" 

        我是windows,则添加Windows的配置;

        配置自动打包:在start命令中添加 webpack即可;

        修改后的package.json

    {
      "name": "demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack && start http://localhost:8080 && webpack-dev-server --inline"
      },
      "keywords": [
        "demo"
      ],
      "author": "zhuhao",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14",
        "webpack-dev-server": "^3.1.3"
      }
    }

            (9):整合打包,并实现热部署,将入口index.js文件和index.html文件打包到一起。开始的时候index.html可以不用引用index.js

        安装插件 html-webpack-plugin

    npm install html-webpack-plugin --save-dev
    修改webpack.config.js文件配置
    var HtmlWebpackPlugin = require('html-webpack-plugin');
     plugins: [
    		*******
            new HtmlWebpackPlugin({
                template: './index.html'
            })
    		******
        ]

    修改后的webpack.config.js

    var path = require('path');
    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry: './index.js',
        mode: 'development',                    //解决打包报错问题
        output: {
            path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
            filename: "bundle.js"
        },
        devServer: {
            historyApiFallback: true,
            inline: true,//注意:不写hot: true,否则浏览器无法自动更新;也不要写colors:true,progress:true等,webpack2.x已不支持这些
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new webpack.HotModuleReplacementPlugin()
        ],
        module: {
            rules: []
        }
    };

        这样配置之后,在我们修改js或者html之后 页面会自动刷新,并更新为最新代码

            (10):配置代理服务器,获取后台数据;

    修改webpack.config.js文件配置

    devServer: {
           ***********************
            proxy: {
                // 请求到 '/device' 下 的请求都会被代理到 target: http://debug.xxx.com 中
                '/device/*': { 
                    target: 'http://debug.xxx.com',
                    secure: false, // 接受 运行在 https 上的服务
                    changeOrigin: true
                }
            }
        }
    例:我的配置是
    proxy: {
                // 请求到 '/zboxService' 下 的请求都会被代理到 target: http://localhost:8021 中
                '/zboxService/*': {
                    target: 'http://localhost:8021',
                    secure: false, // 接受 运行在 https 上的服务
                    changeOrigin: true
                }
            },

    本地跑后台项目即可,就不存在跨域的问题了;

    ajax例子:

    $.ajax({
        url:"/zboxService/base/testWeb/getPage",//会自动代理到http://localhost:8021/zboxService/base/testWeb/getPage
        dataType:"json",
        success:function (data) {
            console.log(data);
        }
    })

            (11):其他,关于配置前端访问端口。

    修改 webpack.config.js中的 devServer即可

    var path = require('path');
    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry: './index.js',
        mode: 'development',
        output: {
            path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
            filename: "bundle.js"
        },
        devServer: {
            port: 8099,                       //当然这里修改了,则其他地方也得修改,package.json中的start参数
            historyApiFallback: true,
            inline: true,//注意:不写hot: true,否则浏览器无法自动更新;也不要写colors:true,progress:true等,webpack2.x已不支持这些
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new webpack.HotModuleReplacementPlugin()
        ],
        module: {
            rules: []
        }
    };

    项目下载 https://github.com/zhuhao18/Zbox-bios-web

    展开全文
  • webpack-dev-server使用方法

    千次阅读 2019-08-09 09:03:44
    webpack-dev-server使用方法 首先来回顾以下webpack的内容 首先,我们来看看基本的webpack.config.js的写法 const path=require('path') //这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个...

    webpack-dev-server使用方法

    首先来回顾以下webpack的内容

    首先,我们来看看基本的webpack.config.js的写法

    const path=require('path')
    //这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象
    module.exports={
    	//在配置文件中需要手动指定入口和出口
    	entry:path.join(__dirname,'./src/main.js'),//入口,表示要使用webpack打包哪个文件
    	output:{
    		path:path.join(__dirname,'./dist'),//指定打包好的文件,输出到哪个目录中去
    		filename:'bundle.js' //这是指定 输出的文件的名称
    	}
    }
    

    配置文件提供一个入口和一个出口,webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack –watch的命令来动态监听文件的改变并实时打包,输出新bundle.js文件,这样文件多了之后打包速度会很慢,此外这样的打包的方式不能做到hot replace,即每次webpack编译之后,你还需要手动刷新浏览器。

    webpack-dev-server其中部分功能就能克服上面的2个问题。

    原始文件作出改动后,webpack-dev-server会实时的编译,但是最后的编译的文件并没有输出到目标文件夹,即上面配置的:

    output:{
    		path:path.join(__dirname,'./dist'),//指定打包好的文件,输出到哪个目录中去
    		filename:'bundle.js' //这是指定 输出的文件的名称
    	}
    

    注意:你启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

    一、安装webpack_dev_server

    webpack_dev_server的作用其实就是**“热部署”**

    注意:一定要在本项目中安装webpack才行(不加-g,在项目根目录出现node_modules文件夹,内含webpack及其依赖包)

    npm install webpack
    

    在本地项目中安装完webpack后,再在终端中进入项目目录下,敲下

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

    回车来安装webpack_dev_server,

    之后再启动webpack_dev_server

    .\node_modules\.bin\webpack-dev-server
    

    或者是npm run dev命令也行,为了避免出现webpack和webpack-dev-server之间的版本兼容性问题,这里举例按下图配置版本是没有问题的

    命令行执行成功了

    到此webpack_dev_server热部署已经启动了,部署的服务器地址在localhost:8080/上,项目也就部署到该地址上了

    以本例来说:main.js做以下修改,然后ctrl+s保存,会看到cmd控制台会再次编译成功,截图见下面第2张图

    然后我们再次访问src下的index.html发现颜色还是red,没有变成blue。继续看下面是如何解决此问题!

    我们再去看index.html文件,发现引入的js文件是本项目的dist/bundle.js是磁盘上确确实实存在的文件,而我们webpack_dev_server的帮我们重新打包生成的bundle.js文件并没有存放到实际的物理磁盘上(因为是重新编译打包,所以是覆盖原文件bundle.js);而是直接存放在电脑的内存中,所以我们这里的问题很简单解决,直接把src="…/dist/bundle.js"改成src="/bundle.js"即可,src="/bundle.js"中的bundle.js不是从本项目导入的,而是从电脑内存导入的(解释:因为是webpack_dev_server部署服务器(使用内存空间)地址在localhost:8080,所以可以直接使用"/"来访问,所以“/bundle.js”是从内存导入的),

    修改成src="/bundle.js"之后,就没有问题了,每次我们修改main.js里的代码,只需要ctrl+s保存,然后webpack_dev_server自动编译(热部署),浏览器端就会即时展示新的应用效果

    二、webpack_dev_server的常用命令参数

    我们可以自定义设置webpack_dev_server启动的一些参数,而不采用它默认的

    第一种配置方式

    下面的–hot参数是“热加载”的意思,就是说我们每次修改要编译的源文件(对修改css文件可以,但是对js文件好像不行)然后ctrl+s保存后,浏览器不重新刷新,而是直接异步加载

    第二种配置方式:

    把原来在package.json中dev:后面的参数部分给删掉,只留下“webpack-dev-server”部分

    再修改webpack.config.js,添加deServer:属性和plugins属性,按下图配置,同时要在webpack.config.js开头添加const webpack=require(‘webpack’)即可

    三、html-webpack-plugin的两个基本作用

    因为我们的index.html是存放在磁盘上的,我们如果想把index.html页面也存放到内存中(也用webpack-dev-server部署)去该怎么办呢?这个时候就需要用到html-webpack-plugin插件了

    在plugins属性中写new htmlWebpackPlugin()对象,然后指定原文件,和要在内存中生成的目标页面的名字即可,这样OK了

    四、loader—配置处理css样式表的第三方loader

    如果我们直接在main.js里面引入css文件然后用webpack-dev-server打包部署的话,会报错,所以我们需要解决这个问题、 注意:webpack默认只能打包处理 JS类型的文件,无法处理其他的非JS类型的文件

    解决问题,

    第一步: 先在项目的cmd控制台下执行

    npm i style-loader css-loader -D
    

    来安装css加载器

    具体思路见下图:

    第二步: 在webpack.config.js里面新增一个module节点,然后进行下图配置

    到此为止经过配置以后,webpack-dev-server就可以对css文件打包部署了

    总结: webpack处理第三方文件类型的过程

    1.发现这个要处理的文件不是JS文件,然后就去配置文件中,查找有没有对应的第三方loader规则

    2.如果能够找到对应的规则,就会调用对应的loader处理这种文件类型

    3.在调用loader的时候,是从后往前调用的,比如本例中就是先调用css-loader,再调用style-loader

    4.当最后的一个loader调用完毕,会把处理的结果直接交给webpack进行打包合并,最终输出到bundle.js中去

    五、loader—配置处理less样式表的第三方loader

    比如再main.js中引入less文件如下,webpack肯定不能直接对此编译和打包部署,所以需要我们在本地项目中安装less-loader,

    在项目的cmd控制台中输入npm i less-loader -D安装less-loader

    然后再在项目的cmd控制台中输入npm i less -D安装less

    然后再在webpack.config.js中的module里配置以.less为结尾的文件的规则,loader的执行规则是从右到左,所以下面配置写的是最右边是less-loader,然后处理完交给css-loader,再然后把处理结果交给style-loader,最后把最终结果交给webpack打包部署。 可以看到loader配置是从右到左的

    六、loader—配置处理sass样式表的第三方loader

    跟上面一样的套路做法,如果再main.js中引入.scss文件

    解决方法:

    ①在项目的cmd控制台中输入npm i sass-loader -D安装sass-loader

    ②然后再输入npm i node-sass -D安装node-sass

    ③然后在webpack.config.js中的module里配置以.scss为结尾的文件的规则即可

    展开全文
  • 关于webpack多入口加载很慢的原因

    千次阅读 2018-05-23 11:12:46
    去年为公司搭建了套webpack多页面应用架构,起初用得挺爽,资源整合打包,组件化开发,各种组件复用,需要什么就拿什么,后来入口有50个页面了,慢慢的发现了每次按保存后的更新等待时间越来越长,需要等待10几秒...

    之前为公司搭建了套webpack多页面应用脚手架,起初用得挺爽,资源整合打包,组件化开发,各种组件复用,需要什么就拿什么,后来入口有50个页面了,慢慢的发现了每次按保存后的热加载等待时间越来越长,需要等待10几秒,实在太影响开发效率,于是我查找原因。

    观察发现,每次到热加载时会在emitting HtmlWebpackPlugin这停留很久。



    于是我想知道它到底停留了多长时间呢?
    在package.json内加入--profile,它会告诉你编译过程中哪些步骤耗时最长。



    停止npm,重新运行webpack-dev-server,修改下文件按保存,观察控制台,发现总花费时长为15035毫秒,在emitting就花费了13239毫秒,这emitting应该就是指上面的图片的emitting HtmlWebpackPlugin了,看来我们解决HtmlWebpackPlugin,热加载速度就能恢复正常了。




    HtmlWebpackPlugin就是我们入口对应的的html页面,new的页面越多,热加载速度就会越慢。



    我尝试注释掉所有html页面,只留下一个案例详情html页面,重新启动webpack-dev-server,修改文件按下保存,发现速度惊人,只用了772毫米,看来问题出在html-webpack-plugin这个插件上。





    难道是我的html-webpack-plugin配置有问题吗,于是我在网上寻找解决办法,做了各种尝试,直到我找到html-webpack-plugin的github上放弃寻找了,原来插件作者有发布几十条lssues(链接https://github.com/jantimon/html-webpack-plugin/issues),其中就包括该插件的多页面性能问题。




    我尝试点进问题谈论里面看了看,里面的谈论已经不能算是怎样配置html-webpack-plugin插件了,涉及webpack底层的东西,觉得没必要去深究了,也让人不得不思考webpack现在是否适合多页面开发啊。。

     总结:

    1、HtmlWebpackPlugin除了正在开发的页面,其它注释掉。

    2、等待插件作者修复此问题。


    如有同学能解决了,麻烦分享下,感激不进,本人偶然解决了,也会在此分享出来。。。


    展开全文
  • Webpack多页面加载缓慢问题分析与解决 一、问题引入 使用webpack + vue多入口模式后,随着项目模块越来越多,整个项目的入口多达30多个,更新变得缓慢,保存一次等待加载的时间多达2-3分钟,这也意味着,改...
  • webpack热模块替换(HMR)/更新

    万次阅读 2017-03-17 22:15:45
    这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作更新。
  • 好不容易学会了一种前端框架,但在大型项目中的webpack也是必不可少的,所以有时候需要自己去动手改造一下webpack,接下来就从建立一个js文件开始逐步实现webpack的打包以及部署。 在使用的webpack4版本和以前的...
  • 在自己搭建的项目中,使用webpack命令可以打包,随后使用webpack-dev-server启动服务,可以查看更改; 在package.json中我是如下配置: 但是我配置了更新插件却不生效,更改代码后,控制台的确编译完成,但是...
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • 浅谈vue+webpack项目调试方法

    万次阅读 2017-07-03 14:04:28
    有人觉得vue项目难调试,是因为用了webpack。所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手。
  • 配置webpack-dev-server

    千次阅读 2019-06-19 18:15:21
    1.相关概念 webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的...自动刷新指当修改代码时webpack会进行自动编译,更新网页内容 替换指运行时更新各种模块,即局部...
  • 近几天为了研究热部署搞的我一头雾水,就在今天早上发现了一个很简单的方式就可以实现热部署了,没错啦,就是下面这个命令 webpack --watch 其实在我眼里,热加载和热部署都是一样,所以我写2个是为了方便seo查找...
  • 1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取... 2.安装webpack项目模版 vue init 比如: vue init webpack my-project 之后可以在当前目录下下载该模版,然后 npm install
  • 本文主要介绍vue+webpack打包部署到nginx服务器。node.js+npm+vue+webpack+nginx前端项目打包部署到服务器 vue/express+node.js+mongodb 因为可以需要依赖node.js,所有需要先安装node.js,步骤如下: 一、环境准备...
  • Webpack——令人困惑的地方

    万次阅读 2016-07-15 08:42:52
    Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。 ...当我第一次看到Webpack的...经过一段时间的尝试之后我认为这是因为Webpack只是使用了比
  • 一文入门 webpack4 ( 极力推荐!!! )

    千次阅读 2020-06-03 09:12:55
    webpack的配置,这让我们关注与Vue的开发,不需要过多的关注webpack配置问题,然而webpack作为前端开发的利器,还是非常有必要掌握的。 WebPack主要概念: A、入口:webpack从哪些文件开始构建依赖关系,比如main.js...
  • webpack-dev-server实现项目热部署

    千次阅读 2018-11-10 17:23:46
    文章目录webpack-dev-server作用修改源码 webpack-dev-server作用   我们在修改了项目代码以后需要不断的重新执行webpack命令,重新打包然后回到浏览器去刷新页面,这种开发效率很低下,所以说为了省去这部分没...
  • 原创超清的 Webpack2 视频教程

    千次阅读 2017-04-06 09:14:47
    100 分钟 webpack 2.0 入门视频教程 webpack 作为目前前端开发必备的框架。 webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的,我上传到了优酷上供大家学习参考使用。 这个基本就是 webpack 2.0 最好...
  • Vue学习总结(三):webpack和vue-cli

    千次阅读 2019-04-10 16:40:28
    webpack Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。 中文官方网站:https://www.webpackjs.com/ 官网给出的解释: 本质上,webpack 是一个现代 JavaScript 应用程序的...
  • http和websocket共用同一端口

    千次阅读 2019-01-07 22:21:27
    webpack热部署相关的插件 webpack-hot-middleware:是模块热替换插件,可以避免网页刷新。这个功能并不重要,因为我们可以手动刷新。 webpack-dev-middleware:是开发插件,自动增量构建webpack(只重新构建依赖所...
1 2 3 4 5 ... 20
收藏数 1,758
精华内容 703
关键字:

webpack 修改html热部署