javascript - Vue.js/webpack : how do I clear out old bundle main-*. js 文件,当热重载转译它们时?

标签 javascript django webpack vue.js

我正在使用 Vue.js 通过 Django 创建一个 SPA 应用程序,我使用 webpack(特别是来自 vue-cli设置)。

我使用以下代码来“观察”和热重载代码:

$ ./node_modules/.bin/webpack --config webpack.config.js --watch

问题是每次我更改代码并构建它时,它都会生成一个新的 bundle .js 文件并更新 webpack-stats.json 以指向那个文件,但不会删除旧的。我如何让它删除旧的(无用的)文件?

webpack.config.js:

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')


function resolve (dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    context: __dirname,

    // entry point of our app. 
    // assets/js/index.js should require other js modules and dependencies it needs
    entry: './src/main', 

    output: {
            path: path.resolve('./static/bundles/'),
            filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            {test: /\.vue$/, loader: 'vue-loader'}

        ],
    },

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        }
    },
}

webpack-stats.json:

{  
   "status":"done",
   "chunks":{  
      "main":[  
         {  
            "name":"main-faa72a69b29c1decd182.js",
            "path":"/Users/me/Code/projectname/static/bundles/main-faa72a69b29c1decd182.js"
         }
      ]
   }
}

另外,将它添加到 git/source control 的好方法是什么?否则它每次都会改变,我必须像这样添加它:

$ git add static/bundles/main-XXXXX.js -f

这很烦人。

有什么指点吗?谢谢!

最佳答案

你需要clean-webpack-plugin github link
首先安装它:

npm i clean-webpack-plugin --save-dev

然后在 webpack.config.js 中添加这些行(我在我添加的行中添加了注释):

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
const CleanWebpackPlugin = require('clean-webpack-plugin'); // require clean-webpack-plugin

function resolve (dir) {
    return path.join(__dirname, dir)
}

// the path(s) that should be cleaned
let pathsToClean = [
    path.resolve('./static/bundles/'),  // same as output path
]

// the clean options to use
let cleanOptions = {
    root: __dirname,
    exclude:  [],  // add files you wanna exclude here
    verbose:  true,
    dry:      false
}

module.exports = {
    context: __dirname,

    // entry point of our app. 
    // assets/js/index.js should require other js modules and dependencies it needs
    entry: './src/main', 

    output: {
        path: path.resolve('./static/bundles/'),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new CleanWebpackPlugin(pathsToClean, cleanOptions),  // add clean-webpack to plugins
        new BundleTracker({filename: './webpack-stats.json'}),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            {test: /\.vue$/, loader: 'vue-loader'}

        ],
    },

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        }
    },
}

就是这样,现在每次你运行 npm run build 时,插件都会删除 static/bundles/ 文件夹,然后再构建,所以你以前的所有文件都会被删除,只有新文件会在那里。使用 npm run watch

观看时不会删除旧文件

关于javascript - Vue.js/webpack : how do I clear out old bundle main-*. js 文件,当热重载转译它们时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44317729/

相关文章:

javascript - html <输入需要包含特定文本

Webpack:将多个 vendor css 捆绑在一个单独的文件中?

javascript - 如何使用ajax将数据附加到特定帖子?

javascript - 视差背景揭示了图像的边缘和它后面的内容

python - 如何使用 Stripe 保护 Django 中的 webhook

python - 记录未显示在模板中

python - 将 JSON 转换为 Python 字典

CSS 模块和多个布局/主题?

javascript - 如何从 webpack 编译的模板文字中删除\n 和\t?

javascript - iPhone Web App Div 标签在 Safari 中加载