最小化webpack项目

最新推荐文章于 2024-05-16 10:30:30 发布

weixin_30426879

最新推荐文章于 2024-05-16 10:30:30 发布

阅读量69

点赞数

文章标签： webpack json ViewUI

原文链接：http://www.cnblogs.com/Netsharp/p/10137515.html

版权

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

参考资料：入门 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"
                    }
                ]
            }
        ]
    }
    
}

转载于:https://www.cnblogs.com/Netsharp/p/10137515.html

weixin_30426879

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最小化webpack项目

先把代码贴出来，以后慢慢加说明参考资料：入门 Webpack，看这篇就够了/webpack 搭建自动打开，刷新浏览器一.功能代码1.index.html<!DOCTYPE html><html> <head> <title>bootstrap demo</title> <meta c...
复制链接

扫一扫