最小化webpack專案
阿新 • • 發佈：2018-12-18
先把程式碼貼出來，以後慢慢加說明
參考資料：入門 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.index.js
const text = require("./helper.js");
document.body.appendChild(text());
3.helper.js
module.exports=function(){ let text = document.createElement("p"); text.textContent= "hello world" return 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' }) ] }