我正在使用 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/