var webpack = require('webpack');//引入Webpack模块，注意这里只能使用ES5语法引入 module.exports = { …… output: { path: __dirname + "/build",//打包后的bundle.js文件存放的地方 filename: "https://www.jb51.net/bundle.js" //打包后的文件名 }, …… };
打开该目录下的index.html，看到以下输出运行成功：
三、添加热替换模块
项目已经可以运行了，但是每次输完代码都要npm start进行打包，想想都没办法忍受，这就需要用到webpack-dev-server热替换模块，所见即所得
其实在前面的代码中，为了避免麻烦，我已经偷偷将热替换模块的部分配置加了进去
webpack.config.js中的
…… plugins: [ new webpack.HotModuleReplacementPlugin()//热模块替换插件 ] ……
package.json中的
"devDependencies": { …… "babel-plugin-react-transform": "^2.0.2", "react-transform-hmr": "^1.0.4", "webpack-dev-server": "^2.6.1" …… }
还有.babelrc中的
"env": { "development": { "plugins": [ [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] } ] } ] ] } }
你可以将这些代码删除，发现也是可以正常打包并运行。因为之前并没有用到热加载
那我现在想用，要怎么用呢？
很简单，在package.json中加入：
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server" } ……
好，现在运行一下npm run dev
打开localhost:8080
咦，怎么是列出文件列表，哦哦哦，原来是没有配置默认路径；
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server --contentBase='./build' " } ……
重新运行npm run dev：
修改app/components/Hello.jsx
保存后再回到页面，发现页面已经自动更新：
