鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 我用webpack構(gòu)建前端多頁面,熱加載無效

我用webpack構(gòu)建前端多頁面,熱加載無效

熱加載無效
1,目錄結(jié)構(gòu)如下

clipboard.png

2,package.json 配置如下

  "devDependencies": {
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-runtime": "^5.8.34",
    "clean-webpack-plugin": "^0.1.10",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "glob": "^7.0.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.9.0",
    "imports-loader": "^0.6.5",
    "jquery": "^1.12.4",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot --inline",
    "build": "webpack -p"
  }

3,webpack.config.js 配置如下

var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var webPackDevServer = require('webpack-dev-server');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//將你的行內(nèi)樣式提取到單獨(dú)的css文件里,
var HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板生成器
var CleanPlugin = require('clean-webpack-plugin'); // 文件夾清除工具
var CopyWebpackPlugin = require('copy-webpack-plugin'); // 文件拷貝
var config = {
    entry: { //配置入口文件,有幾個寫幾個
        index: './src/js/index.js',
        list: './src/js/list.js',
        about: './src/js/about.js'
    },
    output: {
        path: path.join(__dirname, 'dist'), //打包后生成的目錄
        publicPath: '',    //模板、樣式、腳本、圖片等資源對應(yīng)的server上的路徑
        filename: 'js/[name].js',    //根據(jù)對應(yīng)入口名稱,生成對應(yīng)js名稱
        chunkFilename: 'js/[id].chunk.js'   //chunk生成的配置
    },
    resolve: {
        root: [],
        //設(shè)置require或import的時候可以不需要帶后綴
        extensions: ['', '.js', '.less', '.css']
    },
    module: {
        loaders: [
            {
                test: /\.css$/,

                loader: ExtractTextPlugin.extract('style', 'css')
            },
            {
                test: /\.js$/,
                loader: 'babel',

                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?name=./fonts/[name].[ext]'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url',
                query: {
                    limit: 30720, //30kb 圖片轉(zhuǎn)base64。設(shè)置圖片大小,小于此數(shù)則轉(zhuǎn)換。
                    name: './img/[name].[ext]?' //輸出目錄以及名稱
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({ //全局配置加載
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new CleanPlugin(['dist']),// 清空dist文件夾
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common', // 將公共模塊提取,生成名為`vendors`的chunk
            minChunks: 3 // 提取至少3個模塊共有的部分
        }),
        new ExtractTextPlugin("css/[name].css"), //提取CSS行內(nèi)樣式,轉(zhuǎn)化為link引入
        new webpack.optimize.UglifyJsPlugin({ // js壓縮
            compress: {
                warnings: false
            }
        }),
        new CopyWebpackPlugin([
            {from: './src/img', to: './img'} //拷貝圖片
        ]),
        new webpack.HotModuleReplacementPlugin() // 熱加
    ],
    externals: {
        $: 'jQuery'
    },
    //devtool: '#source-map',
    //使用webpack-dev-server服務(wù)器,提高開發(fā)效率
    devServer: {
        contentBase: './dist',
        hot: true,
        inline: true,
        progress: true,//報錯無法識別,刪除后也能正常刷新
        hastoryApiFallback: true,
        port: 8080, //端口你可以自定義
        open: true
    }
};

module.exports = config;

var pages = Object.keys(getEntry('./src/*.html'));
var confTitle = [
    {name: 'index', title: '這是首頁標(biāo)題'},
    {name: 'list', title: '這是列表標(biāo)題'},
    {name: 'about', title: '這是關(guān)于我標(biāo)題'}
]
//生成HTML模板
pages.forEach(function (pathname) {
    var itemName = pathname.split('src\\') //根據(jù)系統(tǒng)路徑來取文件名,window下的做法//,其它系統(tǒng)另測
    var conf = {
        filename: itemName[1] + '.html', //生成的html存放路徑,相對于path
        template: pathname + '.html', //html模板路徑
        inject: true, //允許插件修改哪些內(nèi)容,包括head與body
        hash: false //是否添加hash值
        // minify: { //壓縮HTML文件
        //     removeComments: true,//移除HTML中的注釋
        //     collapseWhitespace: false //刪除空白符與換行符
        // }
    };
    conf.chunks = ['common', itemName[1]]
    for (var i in confTitle) {
        if (confTitle[i].name === itemName[1]) {
            conf.title = confTitle[i].title
        }
    }
    config.plugins.push(new HtmlWebpackPlugin(conf));
});


//按文件名來獲取入口文件(即需要生成的模板文件數(shù)量)
function getEntry(globPath) {
    var files = glob.sync(globPath);
    var entries = {},
        entry, dirname, basename, pathname, extname;

    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);
        extname = path.extname(entry);
        basename = path.basename(entry, extname);
        pathname = path.join(dirname, basename);
        entries[pathname] = './' + entry;
    }
    return entries;
}

求各位大神看一下哪里出問題了,熱加載總是無效

回答
編輯回答
若相惜

webpack 3.0以上的版本,熱更新中要去掉hot:true選項并且命令啟動要取消--hot參數(shù)。

你可以試試,雖然你的版本不是3.0以上。

2018年7月22日 16:07