以后我们再进行调试时，以本文为例，则需要打开 localhost:8080/public/index.html ，因为每次webpack的 HtmlWebpackPlugin 都会把新的js文件加入到这个html文件内。在开发全部完成后，我们可以将js路径写死，添加到原有的 index.html 文件中。
以下是我们 webpack.config.js 全部的配置;
var webpack = require('webpack'); var CleanWebpackPlugin = require('clean-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { devtool:'cheap-module-eval-source-map', entry:{ main:__dirname + '/app/main.js', vendor:'moment' }, output:{ path:__dirname + '/public', filename:'[name].[id].js', publicPath:'/public/' }, devServer:{ inline:true, hot:true }, module:{ loaders:[ { test:/\.js$/, exclude:/node_modules/, loader:'babel-loader', query:{ presets:['es2015','stage-0'] } }, { test:/\.less$/, exclude:/node_modules/, loader:'style-loader!css-loader!less-loader' } ] }, plugins:[ new CleanWebpackPlugin( ['public/main.*.js','public/manifest.*.js'], { root:__dirname, verbose:true, dry:false } ), new webpack.optimize.CommonsChunkPlugin({ names:['vendor','manifest'] }), new HtmlWebpackPlugin({ title:'demo', template:'index.html' }), new UglifyJsPlugin({ beautify:true, exclude:['/node_modules/'], compress:{ warnings:false }, output:{ comments:false } }) ] }
整个项目，我们在 app 文件下的 main.js 内写业务代码， main.less 写样式，在 public/index.html 下使用热替换进行调试，打包后的压缩文件在 public 文件夹下，并且对业务代码，第三方代码进行了清晰地区分。
使用这份webpack配置，我们实现了：
工程的打包调试
公共代码提取，提高开发效率
资源压缩
热替换
这份配置麻雀虽小，五脏俱全。本文还有许多不完善之处，比如一些插件的使用方法，原理没有与大家讲清楚，但webpack实在太庞大了，一个插件的使用方法和原理都可以写上千字的文章了，学习不可浅尝辄止，但也不能太钻牛角尖，与大家共勉~
您可能感兴趣的文章: