module.exports={
entry:'./app/index.js',
output:{
path:'./dist',
filename:'bundle.js'
},
module:{
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets:['react','es2015']
}
},
{
test: /\.json?$/,
loader: 'json'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.less/,
loader: 'style-loader!css-loader!less-loader'
}
]
}
}
我对webpack.config理解是
新建一个index.html
引用打包好的bundle的js文件。
你可以在新建app文件,app中里可以有若个。
比如index.js
var react=require("react");
var alert=require("./children/common.js");
var mm=require("./children/bar.js");
console.log(react.version);
mm.sayName1()
mm.menu()
./children/common.js
module.exports=alert("你在干嘛?");
./children/bar.js
var root = document.getElementById("root"); exports.sayName1 = function () { root.innerHTML = "我浊"; }; exports.menu = function () { var p = document.createElement("p"); var pnode = document.createTextNode("这是一个新的段落"); p.appendChild(pnode); root.appendChild(p); }
cmd>webpack --watch
测试吧