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