在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ webpack每次打包都會生成新文件

webpack每次打包都會生成新文件

我這邊用Node.js作為后臺,webpack打包并編譯,前端用Vue,然后為了減少不必要的編譯盡量用緩存來實現(xiàn)就用了assets-webpack-plugin。但是現(xiàn)在的結(jié)果是,每次輸入‘webpack’后都會生成新的'bundle.[hash].js',而且就算是修改了vue的文件,每次必須要編譯一次頁面才會發(fā)生改變,貼一下代碼,麻煩各位大佬幫我看一下問題,謝謝。

const webpack = require("webpack");
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const AssetsPlugin = require('assets-webpack-plugin')

module.exports = {
    entry : './client/main',
    // context: path.join(__dirname, 'client'),
    output : { //出口文件
        path : path.join(__dirname, 'public'),
        publicPath : '/public/',
        filename : "main.bundle.[hash].js"
    },
    module : {
        //定義了對模塊的處理邏輯
        loaders : [
            {test : /\.js$/, loader : "babel-loader", exclude : /node_modules/},
            {test : /\.vue$/, loader : "vue-loader"},
            {test : /\.css$/, loader : 'style-loader!css-loader!sass-loader' },
            {test : /\.less$/, loader : 'style-loader!css-loader!less-loader'},
            {test : /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader : "file-loader?prefix=font/" },
            {test : /\.(woff|woff2)$/, loader :"url-loader?prefix=font/&limit=5000" },
            {test : /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader : "url-loader?limit=10000&mimetype=application/octet-stream" },
            {test : /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader : "url-loader?limit=10000&mimetype=image/svg+xml" },
            {test : /\.(png|jpg)$/, loader : "url-loader?limit=8192&name=images/[hash:8].[name].[ext]"},
            {test : /\.html$/, loader : 'html-withimg-loader'},
            {test : /\.(html|tpl)$/, loader : 'html-loader' }
        ]
    },
    devServer : {
        historyApiFallback : true,
        inline : true,
        hot : false,
        host : "0.0.0.0",
        disableHostCheck: true
    },
    devtool : 'cheap-module-eval-source-map',
    resolve : {
        // require時省略的擴展名,如:require('module') 不需要module.js
        extensions: ['.js', '.vue','.css'],
        // 別名,可以直接使用別名來代表設(shè)定的路徑以及其他
        alias: {
            components: path.join(__dirname, './client/components'),
            vue: 'vue/dist/vue.js',
            'public': path.resolve(__dirname, './public'),
        }
    },
    plugins : [
        new webpack.LoaderOptionsPlugin({
            options : {
                babel : {
                    presets: ['es2015']
                }
            }
        }),
        new ExtractTextPlugin('[name].css'),
        new webpack.ProvidePlugin({
            jQuery : "jquery",
            $ : "jquery"
        }),
        new AssetsPlugin({
            filename: 'public/webpack.assets.js',
            processOutput: function (assets) {
                return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
            }
        })
    ]
};
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>Index page</h1>
    <div id="app">
        <router-view></router-view>
    </div>
    <script>
        document.write('<script src="/public/webpack.assets.js?v=' + Math.random() + '"><\/script>')
    </script>
    <script>
    document.write('<script src="' + window.WEBPACK_ASSETS['main'].js + '"><\/script>')
  </script>
</body>
</html>
回答
編輯回答
舊城人

去掉[hash]不就行了。用hash就是為了不被緩存。瀏覽器假裝源文件為被改。這問題又來了。不用hash的話,瀏覽器不知道你改沒改。會認為你沒改。

webpack就是干編譯這事的,有什么必要不必要的編譯?

2017年10月6日 04:57
編輯回答
淚染裳

編譯的過程中,不是會處理,改過的才變名,沒有修改的還是之前的hash名啊

2017年9月22日 05:50