webpack打包工具,自动打包配置,即使预览,在自动打包完毕之后,默认打开服务器网页 - 前端笔记-一,自动打包 默认情况下,我们更改入口js文件的代码,需要重新运行命令打包webpack,才能生成出口的js文件 那么每次都要重新执行命令打包,这是一个非常繁琐的事情,那么,自...

学习笔记

乾坤未定,你我皆是黑马
乾坤已定,我便扭转乾坤
首页>> >>webpack打包工具,自动打包配置,即使预览,在自动打包完毕之后,默认打开服务器网页 - 前端笔记
一,自动打包  
默认情况下,我们更改入口js文件的代码,需要重新运行命令打包webpack,才能生成出口的js文件
    那么每次都要重新执行命令打包,这是一个非常繁琐的事情,那么,自动打包可以解决这样繁琐的操作。
    实现自动打包功能的步骤如下:

        A.安装自动打包功能的包:webpack-dev-server
            npm install webpack-dev-server -D

        B.修改package.json中的dev指令如下:
            "scripts":{
                "dev":"webpack-dev-server"
            }

        C.将引入的js文件路径更改为:<script src="/bundle.js"></script>

        D.运行npm run dev,进行打包

        E.打开网址查看效果:http://localhost:8080

        注意:webpack-dev-server自动打包的输出文件,默认放到了服务器的根目录中(服务器根目录,一般加上浏览器自动打开就不需要引入js了,因为浏览器自动打开,会自动引入js)

二,自动打包完成即时打开 浏览器
    
        在自动打包完毕之后,默认打开服务器网页,实现方式就是打开package.json文件,修改dev命令:
            "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

三,自动打开浏览器,跳转成预览页面(跳转到src目录),而不是文件根目录

  因为当我们访问默认的 http://localhost:8080/的时候,看到的是一些文件和文件夹,想要查看我们的页面
    还需要点击文件夹点击文件才能查看,那么我们希望默认就能看到一个页面,而不是看到文件夹或者目录。
    实现默认预览页面功能的步骤如下:

        A.安装默认预览功能的包:html-webpack-plugin
            npm install html-webpack-plugin -D

        B.修改webpack.config.js文件,如下:
            //导入包
            const HtmlWebpackPlugin = require("html-webpack-plugin");
            //创建对象
            const htmlPlugin = new HtmlWebpackPlugin({
                //设置生成预览页面的模板文件
                template:"./src/index.html",
                //设置生成的预览页面名称
                filename:"index.html"
            })

        C.继续修改webpack.config.js文件,添加plugins信息:
            module.exports = {
                ......
                plugins:[ htmlPlugin ]
            }

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » webpack打包工具,自动打包配置,即使预览,在自动打包完毕之后,默认打开服务器网页
版权所有:《前端笔记
文章标题:《webpack打包工具,自动打包配置,即使预览,在自动打包完毕之后,默认打开服务器网页
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-50.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)