WebPack 熱加載配置(中)

WebPack 熱加載配置(中)

採用WebPack2進行打包
WebPack2安裝sudo npm install -g webpack
WebPack-dev-server安裝sudo npm install -g webpack-dev-server
全局安裝完後進行項目目錄下的安裝！！！！（安裝的時候最好在前面加上sudo，有時權限不夠會安裝失敗）
$ sudo npm install webpack --save
$ sudo npm install webpack-dev-server --save
出現問題能夠看React配置必踩坑！！！
在目錄文件下創建一個webpack.config.js
不少參考都是採用WebPack1進行打包，對於webpack2更新後的講解不多
不過仍是能夠經過官方文檔，加上對webpack1的學習，本身仍是琢磨出了webpack2如何配置，(^o^)/~，以下
WebPack2配置信息
// webpack.config.js
var webpack = require("webpack");
var path = require("path");

module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, "src"),
entry: "./js/index.js",
output: {
path: path.resolve(__dirname, "src"),
filename: 'bundle.js' // 打包輸出的文件
},
module: {
rules: [{
test: /.js$/, // test 去判斷是否爲.js或.jsx,是的話就是進行es6和jsx的編譯
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
//配置參數;
options: { presets: ['es2015','react'] }
}],
}]
},
};
接下來運行WebPack打包

在Mac終端中，項目的根目錄下，webpack進行打包，成功打包後會在src目錄下生成bundle.js，在瀏覽器中查看
本來頁面上的123覆蓋成了hello world ！！