先把代码贴出来，以后慢慢加说明

参考资料：入门 Webpack，看这篇就够了 / webpack 搭建自动打开，刷新浏览器

一.功能代码
1.index.html

<!DOCTYPE html>

<html>

  <head>

    <title>bootstrap demo</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  </head>

  <body>

    <script src="bundle.js"></script>

  </body>

</html>

2.style.css

p{color:red}

3.helper.js

import "./style.css";

export default function(){

    let p = document.createElement("p");

    p.textContent="hello world  "

    return p;

}

4.index.js

import text from "./helper.js";

document.body.appendChild(text());

二.package.json

{

  "name": "indie-grow",

  "version": "0.2.0",

  "description": "indie monitor and dashbord",

  "main": "index.js",

  "scripts": {

    "test": "test",

    "start": "webpack-dev-server --hot --inline",

    "hello": "echo npm says hello!!!!!!",

    "server": "webpack-dev-server --open"

  },

  "keywords": [

    "indie"

  ],

  "author": "schneider",

  "license": "ISC",

  "devDependencies": {

    "open-browser-webpack-plugin": "0.0.5",

    "webpack": "^4.27.1",

    "webpack-cli": "^3.1.2",

    "webpack-dev-server": "^3.1.10"

  },

  "dependencies": {

    "bootstrap": "^4.1.3",

    "jquery": "^3.3.1",

    "popper.js": "^1.14.3"

  }

}

三.webpack.config.js

var webpack = require('webpack');

var OpenBrowserPlugin = require('open-browser-webpack-plugin')

module.exports={

    devtool: 'eval-source-map',

    entry : __dirname + "/index.js",

    output : {

        path : __dirname,

        filename : "bundle.js"

    },

    devServer: {

        port:80,

        contentBase: ".",

        historyApiFallback: true,

        inline: true

      } ,

      plugins: [

        new OpenBrowserPlugin({ url: 'http://localhost:80' })

    ],

    module: {

        rules:[

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            }

        ]

    }

}

最小化webpack项目的更多相关文章

  1. C#窗口皮肤制作(二)：创建窗口库项目以及最小化、最大化、关闭button的实现

    非常高兴有朋友关注这篇博客,同一时候也十分抱歉让关注的朋友久等了,隔上一篇博客也有3个月没有更新,主要是因为3月份辞职,4月份初离职到期离开了北京高德,来到了上海张江.眼下新工作也处于熟悉其中,希望大 ...

  2. How Javascript works (Javascript工作原理) (十四) 解析，语法抽象树及最小化解析时间的 5 条小技巧

    个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...

  3. webpack 项目接入Vite的通用方案介绍(上)

    愿景 希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本 在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具 读者可直接fo ...

  4. 实现iOS图片等资源文件的热更新化(四): 一个最小化的补丁更新逻辑

    简介 以前写过一个补丁更新的文章,此处会做一个更精简的最小化实现,以便于集成.为了使逻辑具有通用性,将剥离对AFNetworking和ReativeCocoa的依赖.原来的文章,可以先看这里: htt ...

  5. WPF程序最小化到任务通知栏

    我们通常使用的桌面软件,都可以最小化到任务通知栏,并且可以从任务通知栏再打开当前软件,或者通过软件的快捷方式从任务通知栏呼出. 我们可以通过下面的方式把WPF程序最小化到任务栏.由于WPF并没有实现N ...

  6. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（二）转载自码农网

    7. 安装 PHP PHP 是用于 web 基础服务的服务器端脚本语言.它也经常被用作通用编程语言.在最小化安装的 CentOS 中安装 PHP: # yum install php 安装完 php ...

  7. outlook新邮件到达提醒设置以及outlook最小化到托盘设置

    有些邮件是需要马上处理的,因此希望能在收到邮件之后马上就知道,但是有不希望频繁的去检查有没有.outlook可以帮我们轻松做到新邮件到达提醒. 一 .设置outlook新邮件到达提醒:选项->电 ...

  8. .NET Core 最小化发布

    .NET Core 应用最小化独立部署发布,.NET Core 默认应用独立发布,大概占用50m左右的空间,不同的系统大小有所区别. .NET Core 的发布之前我也有所介绍,.NET Core 跨 ...

  9. Effective Java 第三版——17. 最小化可变性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

随机推荐

  1. 分布式 基本理论 BASE

    比起CAP的生硬来, 我更加喜欢BASE.BASE 显得更加好理解.尽管BASE 这个名字本身有迎合语言习惯的恶臭味,为什么不是缩写为 BaSsEc 呢? 其实大部分系统是可以 同时 CAP 的, 因 ...

  2. 搭建Django链接MySQL流程（python2版）

    之前生成选型python3,除了用的python3的pymysql模块之外其他的都是一样的. 1.首先搭建mysql(Mariadb)数据库(单点)         安装方式分为yum安装,rpm包安 ...

  3. eclipse中的javaEE插件

    1.在Eclipse中菜单help选项中选择install new software选项 2.在work with 栏中输入 Juno - http://download.eclipse.org/re ...

  4. ajax发送列表(traditional, serialize )

    $(function () { $('#add_submit_ajax').click(function () { $.ajax({ url:'/addapp/', data:$('#add_app' ...

  5. “帮你”APP——NABCD需求分析

    1.你的创意解决了用户的什么需求?(N) 本学校已存在的失物招领.表白墙.二手市场等QQ群普遍存在信息冗杂,时效性差等缺点.不能充分发挥信息有效性的,我们的“帮你”APP能够充分发挥信息的有效性,让失 ...

  6. React Native踩坑之旅

    原文连接:http://www.studyshare.cn/blog-front/blog/details/1137 最近做一个app,使用React Native实现,如果严格按照RN官方文档去配置 ...

  7. 微信小程序商城开源项目，Weixin-App-Shop 1.0 版本正式发布！！！

    微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...

  8. 移动web图片加载完获取img宽高

    1.vue中 @load=function(){}   等待img加载完触发load函数 2.window.load=function(){var imgheight=$(".btnimg& ...

  9. IOS 微信返回按钮事件控制弹层关闭还是返回上一页

    在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回“<”按钮,就会跳转回上一页或退出网站,而为了避免这种不好的误 ...

  10. 使用拦截器对前端传入的字符串进行trim操作

    @Before("apiItf()") public void before(JoinPoint joinPoint) throws Exception { Object[] ar ...