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

参考资料：入门 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. linux查看tomcat启动运行日志

    1.先切换到:cd tomcat/logs 2.tail -f catalina.out 3.这样运行时就可以实时查看运行日志了

  2. python中os.path模块简介

    1.python中获取当前工作目录 curDir = os.getcwd() os.getcwd()返回的是执行命令时所在的目录,而不是脚本本身所在的目录 2.os.path os.path.absp ...

  3. SSM的搭建

    1.首先是工具的准备. eclipse jdk1.7 maven 3.5.4 tomcat 8.5 2.工具环境的搭建 首先,new建立选择maven project工程,勾选simple proje ...

  4. 关于学习CentOS7使用firewalld打开关闭防火墙和端口

    1.firewalld简介 firewalld是centos7的一大特点,主要有两个优点:一是支持动态更新,不需要重启服务:二就是加入了防火墙的“zone”概念. firewalld有图形界面和工具界 ...

  5. django APPEND_SLASH

    #设置项是否开启URL访问地址后面不为/跳转至带有/的路径APPEND_SLASH=True

  6. [HTML]将错误alert出来[转]

    <script type="text/javascript"> /** * @param {String} errorMessage 错误信息 * @param {St ...

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

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

  8. PL/SQL简单使用——导入、导出数据表

    1.使用PL/SQL导出.导入表 在使用PL/SQL操作oracle数据库时,经常使用的一个操作就是将自己写的数据表导出,或者想把他人的数据表导入到自己的数据库中.虽然是很简单的操作,但自己之前一直出 ...

  9. Codeforces Round #436 D. Make a Permutation!

    题意:给你n个数字,其中可能有相同的数字,要求你用其他的数字替换这些相同的数字,使得所得的序列字典序最小. Examples Input 43 2 2 3 Output 21 2 4 3 Input ...

  10. 深入理解C++11【3】

    [深入理解C++11[3]] 1.POD类型 Plain Old Data. Plain 表示 了POD是个普通的类型.C++11将POD划分为两个基本概念的合集: 1)平凡的(trivial) 2) ...