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

参考资料：入门 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. leetcode每日刷题计划-简单篇day11

    Num 121 买卖股票的最佳时期 Best Time to Buy and Sell Stock class Solution { public: int maxProfit(vector<i ...

  2. sublime编译javaScript脚本

    处理步骤: 1. 首先到 nodejs.org 下载 Node.js 安装包并安装.2. 打开 Sublime Text 3 编辑器.选择菜单 Tools --> Build System -- ...

  3. python3下最简单的九九乘法表

    def minus(): print("=========================九九乘法表===========================") x=1 y=1 wh ...

  4. 多线程服务端与客户端通信(IO是阻塞的)_02

    下面是多线程的;每次服务端接受请求,会创建一个线程专门处理这个请求: 虽然是多线程的,但还是阻塞,相当于单线程处理模式 public class TimeServer { public static ...

  5. Unable to find a single main class from the following candidates ,显示有两个main class

    由于基础框架是用的网上down的源码,我将项目名字改了,估计没有进行maven clean,本地调试的时候没有问题. 当发布时候,执行maven install 一直提示上述错误. 解决办法:1.ma ...

  6. mysql设置远程访问

    Mysql远程访问设置,容许远程连接本地数据库. 1.进入本地Mysql安装目录bin下,登录Mysql, 如图: 2.  切换数据库到内置的名为“mysql”的数据库,可以看到下面的一个名为“use ...

  7. mysql导入太慢解决方法

    半调子数据科学家又要折腾数据,拿到数据一看,3.6G的zip文件,解压看看,卧槽12个G的sql文件.好吧,又要折腾sql数据了.第一件事,肯定是搭一个数据库,导入数据咯. 折腾过sql导入的亲们都知 ...

  8. html5下F11全屏化的几点注意

    1.实现全屏化 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestF ...

  9. mybatisplus打印sql语句

    package com.osplat.config; import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; ...

  10. svn仓库迁移

    注意事项 1.仅迁移代码.日志.版本信息,(用户.权限.配置即conf目录需要手动移动或重新配置) 2.新仓库需无代码,即新建仓库后不要进行上传操作,否则迁移可能造成冲突,导致迁移失败 操作步骤 1. ...