文章出處

六、新建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 -w

cmd控制臺界面如下：

直接訪問本地頁面，發現效果一致。再查看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地址對應的文件目錄
      }
    })
  ]
}