六、新建webpack配置文件 webpack.config.js 文件整體框架內容如下，後續會詳細說明每個配置項的配置 webpack.config.js直接放在項目demo目錄下 七、新建app文件夾，存放html+css+js index.html css/index.css js/index ...
六、新建webpack配置文件 webpack.config.js
文件整體框架內容如下，後續會詳細說明每個配置項的配置
webpack.config.js直接放在項目demo目錄下
module.exports = {
// 配置入口
entry: {
},
// 編譯後的文件路徑
output: {
path: '', // 文件路徑
filename: '' // 文件名稱
},
module: {
// 編譯規則
loaders: []
},
// 輔助的插件
plugins:[]
}七、新建app文件夾，存放html+css+js
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>demo</title>
<link type="text/css" rel="stylesheet" href="./css/index.css" />
</head>
<body>
<p id="demo" class="demo">hello world!</p>
<p id="print"></p>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>css/index.css
@charset "utf-8";
.demo{color:red;font-size:14px;}js/index.js
var elem = document.getElementById("print");
elem.innerHTML = "wall.";最後直接訪問index.html
八、將index.js內容改為webpack編譯輸出
新建origin文件夾，在該目錄下新建origin.js文件
文件內容和index.js一致
接著，配置webpack.config.js
module.exports = {
// 配置入口
entry: {
'/js/index':__dirname +'/origin/origin.js'
},
// 編譯後的文件路徑
output: {
path: __dirname +'/app', // 文件路徑
filename: '[name].js' // 文件名稱
},
module: {
// 編譯規則
loaders: []
},
// 輔助的插件
plugins:[]
}其中入口文件指定為origin.js，輸出文件指定路徑為app文件夾下。
[name].js == ['/js/index'].js
接著啟動webpack
webpack -wcmd控制台界面如下：
直接訪問本地頁面，發現效果一致。再查看app/index.js文件內容，發現已經更改為編譯後的代碼，如下圖
九、安裝browser-sync、browser-sync-webpack-plugin，並配置本地server
npm install --save-dev browser-sync browser-sync-webpack-plugin安裝後，package.json文件變化如下
browser-sync的作用是可以監聽文件修改變化，實時更新
更新webpack.config.js配置
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
// 配置入口
entry: {
'/js/index':__dirname +'/origin/origin.js'
},
// 編譯後的文件路徑
output: {
path: __dirname +'/app', // 文件路徑
filename: '[name].js' // 文件名稱
},
module: {
// 編譯規則
loaders: []
},
// 輔助的插件
plugins:[
new BrowserSyncPlugin({
host:'localhost', // 實時監聽，webpack -w 可以實時更新硬碟中的文件js，css
port:8080,
file:'',
server:{
baseDir:'./app' // localhost地址對應的文件目錄
}
})
]
}在cmd控制台啟動webpack
webpack -w效果如下：
同時，瀏覽器會自動打開並訪問 http://localhost:8080
十、更改origin/origin.js文件，驗證實時更新
修改後，頁面自動刷新
cmd控制台顯示，重新載入了頁面
系列文章：
wepack+sass+vue 入門教程（一）
wepack+sass+vue 入門教程（三）
