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

参考资料：入门 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. 1_Python历史及入门

    前提:简述CPU 内存 硬盘 操作系统 应用程序CPU:计算机的运算核心和控制核心,好像人类的”大脑“内存:负责数据与CPU直接数据交流处理,将临时数据和应用程序加载到内存,然后在交由CPU处理. 造 ...

  2. vim 批量替换使用说明

    基本语法: :[addr]s/源字符串/目的字符串/[option] 全局替换命令: :%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行. "1,20" ...

  3. DRF框架之认证组件用法(第四天)

    1. 什么是drf 框架的认证组件: auth 就等于是jango中的Auth模块,Auth是自带session信息,但是 drf的认证组件可以自定义token携带过去,去判断用的 2.如何实现认证呢 ...

  4. laravel5.6中jquery+ajax分页

    public function shows(Request $request){ $p=$request->get("page"); $page=empty($p)?:$p; ...

  5. 为什么移动构造要使用noexcept

    vector::push_back操作,保证了如果过程中出现异常,vector不会发生变化. push_back过程中,可能会因为已有内存空间不够,申请新的内存,同时把原内存中已有的元素,放到新申请的 ...

  6. a 标签实现分享功能

    在网页中,经常会用到分享功能,例如分享到qq,分享到微信,分享到微博等,但是怎么实现呢?一直没有想清楚这个问题,觉得好高大上的样子,于是在网上找了一些资料,也没有看出个什么所以然来: 于是有些心急了, ...

  7. Lock和Static使用说明和区别

    private static object lockInsertObj = new object(); lock (lockInsertObj){--写代码} 1.静态方法与非静态方法 a.静态方法的 ...

  8. Tensorflow环境下安装Pandas

    https://blog.csdn.net/fentone/article/details/78888136

  9. IntelliJ IDEA mybatis-generator的使用

    STEP 1. 在maven项目的pom.xml 添加mybatis-generator-maven-plugin 插件 pop.xml <dependency> <groupId& ...

  10. CentOS7 yum安装配置 drbd-84-utils （外部模式）

    1 安装环境介绍 1.1 系统环境 内核:3.10.0-862.el7.x86_64  版本:CentOS Linux release 7.5.1804 (Core) 主服务器:hostname = ...