账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack每次打包都会生成新文件
    34
    0

    我这边用Node.js作为后台,webpack打包并编译,前端用Vue,然后为了减少不必要的编译尽量用缓存来实现就用了assets-webpack-plugin。但是现在的结果是,每次输入‘webpack’后都会生成新的'bundle.[hash].js',而且就算是修改了vue的文件,每次必须要编译一次页面才会发生改变,贴一下代码,麻烦各位大佬帮我看一下问题,谢谢。

    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'],
            // 别名,可以直接使用别名来代表设定的路径以及其他
            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="https://www.wanxiangsucai.com/public/webpack.assets.js?v=' + Math.random() + '"><\/script>')
        </script>
        <script>
        document.write('<script src="' + window.WEBPACK_ASSETS['main'].js + '"><\/script>')
      </script>
    </body>
    </html>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 六遥之 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部