这几天在学习webpack使用中，发现的一个问题，记录一下
问题：
1.webpack devServer 无法自动刷新浏览器，但是可以自动编译
2.无法加载js文件（不使用devServer情况下，可以正常加载js）
webpack.config.js的配置如下：
var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract-text-webpack-plugin');var HtmlWebpackPlugin = require('html-webpack-plugin');// 封装自动生成html插件需要的参数var getHtmlConfig = function(name){ return { filename : 'view/' + name + '.html', template : './src/view/' + name + '.html', inject : 'true', hash : 'true', chunks :['common',name] };}module.exports = { mode : 'development',/*三种打包模式，development（用于开发，方便阅读）、production（用于上线，压缩优化）、none（啥都不设置，给机器看的）*/ entry : {//入口 'common' : './src/page/common/index.js', 'index' : './src/page/index/index.js', 'login' : './src/page/login/index.js' }, devServer : {//告诉开发服务器(dev server)，在哪里查找文件 contentBase : path.join(__dirname, 'dist'), inline : true }, output : {//输出 filename : 'js/[name].js', path : path.resolve(__dirname,'dist'),//绝对路径，当前目录下的dist。后面设置的输出路径都以此为基础 }, module : {//loader rules : [ { test : /\.css$/, use : ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader", publicPath : '../'//用于CSS文件url路径查找：url(../resource/xxx.jpg) }) }, { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, use: { loader : 'url-loader', options : { limit : 10000, name : 'resource/[name]-[hash].[ext]' } } } ] }, plugins : [ // 抽离css文件 new ExtractTextPlugin({ filename: "css/bundle.css", disable: false, allChunks: true }), // 自动生成html文件 new HtmlWebpackPlugin(getHtmlConfig("index")), new HtmlWebpackPlugin(getHtmlConfig("login")), //热模块更新 new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], /* 把optimization注释掉之后，devserver可以加载成功js文件和自动刷新了。命令行打包显示： js/vendors~common~index~login.js 345 KiB vendors~common~index~login [emitted] vendors~common~index~login 估计是因为把js文件都抽离到vendors~common~index~login.js这里了，所以在devserver下，index.html引用index.js和common.js没有效 */// optimization: {// // splitChunks: {// chunks: 'initial',// minSize: 30000,// maxSize: 0,// minChunks: 1,// maxAsyncRequests: 5,// maxInitialRequests: 3,// automaticNameDelimiter: '~',// name: true,// cacheGroups: {// vendors: {// test: /[\\/]node_modules[\\/]/,// priority: -10// },// commons: { // test: /page\//,// name: 'page',// priority: 10,// enforce: true// }// }// }// } };命令行打包后显示信息：
解决：
把optimization注释掉之后，devserver可以加载成功js文件和自动刷新了。估计是因为把js文件都抽离到vendors~common~index~login.js这里了，所以在devserver下，index.html引用index.js和common.js没有效。
只是估计，新手上路，目前对webpack的使用还是摸石过河。大家知道原因麻烦评论告知