webpack入门启动webpack工程
前提：
安裝完webpack以及webpack-dev-server
參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83011108
添加代碼：
1.首先在目錄demo下創建一個js文件：webpack.config.js
并初始化它的內容：
var config = {};module.exports = config;2.然后在package.json中添加一個快速啟動webpack-dev-server服務的腳本：
?"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --config webpack.config.js"},當運行:npm run dev 時，就會執行webpack-dev-server --open --config? webpack.config.js 命令
--config是指向webpack-dev-server讀取的配置文件路徑，這里直接讀取我們上面建的webpack.config.js文件.
--open會在執行命令時自動在瀏覽器打開頁面，默認是127.0.0.1:8080，但是IP已經端口都是可以配置的。
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server? --host 172.172.172.1 --post 8888 --open --config webpack.config.js"},3.webpack配置中最重要的也是必選的兩個是入口（Entry）和出口（Output）,
入口的作用是告訴webpack從哪里開始尋找依賴，并且編譯，
出口則是用來配置編譯后的文件存儲位置和文件名。
在demo目錄下新建一個空的main.js作為入口的文件，然后在webpack.config.js中進行入口和輸出的配置:
?
var path = require('path'); var config = {entry:{main:'./main'},output:{path:path.join(__dirname,'./dist'),publicPath:'/dist/',filename:'main.js'}};module.exports = config;entry中的main就是我們配置的單入口，webpack會從main.js文件開始工作。
output中path選項用來存放打包后的文件的輸出目錄，是必填項。
publicPath指定資源文件引用的路徑，如果你的資源存放在CDN上，這里可以填CDN的網址。
filename用于指定輸出文件的名稱。
這里配置的output意思為：打包后的文件會存儲為demo/dist/main.js文件，只要在html中引入它就可以了。
4.在demo目錄下，新建一個index.html作為我們的入口：
<!DOCTYPE HTML> <html><head><title> hello webpack </title><meta charset="utf-8"></head><body><div id="app">Hello Webpack!!!!!!</div><script type="text/javascript" src="/dist/main.js"></script></body> </html>啟動webpack工程
在此處打開命令行，輸入：
?
就會在瀏覽器中打開頁面了：
示例代碼下載：
https://download.csdn.net/download/badao_liumang_qizhi/10713691
總結
以上是生活随笔為你收集整理的webpack入门启动webpack工程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Please install 'webp
- 下一篇： post install error,p