問題描述
目前我們使用
我不能使用 c2212af8f732662acc64.js 我需要將其命名為 bundle.js 或其他正常名稱.
我們的 Webpack 配置:
var webpack = require('webpack');var PROD = JSON.parse(process.env.PROD_DEV || '0');//http://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack模塊.exports = {條目:./entry.js"，開發(fā)工具:源地圖"，輸出: {devtoolLineToLine:真，sourceMapFilename: "app/assets/js/bundle.js.map",路徑信息:真，路徑:__dirname，文件名:產(chǎn)品?app/assets/js/bundle.min.js":app/assets/js/bundle.js"},模塊: {裝載機(jī):[{測試:/.css$/，加載器:style！css"}]},插件:產(chǎn)品?[新的 webpack.optimize.UglifyJsPlugin({minimize: true})]:[]};啊，我繼續(xù)閱讀 并想通了:
gulp.task('webpack', function() {返回 gulp.src('entry.js').pipe(webpack( 需要('./webpack.config.js') )).pipe(gulp.dest('app/assets/js'));});^ 在這里我可以傳入我的實(shí)際 webpack.config，它會使用我已經(jīng)在那里設(shè)置的路徑.在我的情況下，我剛剛刪除了 app/assets/js 因?yàn)槲椰F(xiàn)在 gulp 中有該路徑.
但仍然沒有世俗的想法，為什么在我創(chuàng)建的第一個(gè)任務(wù)中，它會生成隨機(jī)哈希文件名?
Currently we're using Webpack for our Module loader, and Gulp for everything else (sass -> css, and the dev/production build process)
I want to wrap the webpack stuff into gulp, so all I have to do is type gulp and it starts, watches and runs webpack and the rest of what our gulp is setup to do.
So I found webpack-stream and implemented it.
gulp.task('webpack', function() {
return gulp.src('entry.js')
.pipe(webpack({
watch: true,
module: {
loaders: [
{ test: /.css$/, loader: 'style!css' },
],
},
}))
.pipe(gulp.dest('dist/bundle.js'));
});
The problem is that it generates a random character name for the .js file, how are we suppose to use that in our app?
From the github repo:
The above will compile src/entry.js into assets with webpack into dist/ with the output filename of [hash].js (webpack generated hash of the build).
How do you rename these files? Also the new gulp task generates a new file everytime I save an edit:
I can't use c2212af8f732662acc64.js I need it to be named bundle.js or something else normal.
Our Webpack config:
var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// http://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
devtoolLineToLine: true,
sourceMapFilename: "app/assets/js/bundle.js.map",
pathinfo: true,
path: __dirname,
filename: PROD ? "app/assets/js/bundle.min.js" : "app/assets/js/bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({minimize: true})
] : []
};
Ah I read on a bit further and figured it out:
gulp.task('webpack', function() {
return gulp.src('entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('app/assets/js'));
});
^ here I can just pass in my actual webpack.config and it will use the paths I have already set in there. In my case I just removed app/assets/js since I have that path in now gulp instead.
Still no earthly idea though, why with the first task I created, it generates random hash filenames?
這篇關(guān)于如何使用 gulp webpack-stream 生成正確的命名文件?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！