先把代码贴出来，以后慢慢加说明
参考资料：入门 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" } ] } ] } }