最小化webpack项目

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

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

 

posted on 2018-12-18 15:38  Netsharp  阅读(153)  评论(0)  编辑  收藏  举报

导航