Webpack Ausgabe-Dateien auf verschiedene Verzeichnisse
Nachdem Sie ein Projekt erstellen, ich habe index.html, bundle.js und einige .css-Dateien, ich möchte, dass Sie, um in eine dir-Struktur wie diese:
dist/
- css/all.my.css
- js/bundle.js
- index.html
Hier ist was ich getan habe, für die .js-und .css:
entry: {
app: path.resolve(__dirname, 'app/src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist', 'css'),
filename: '../js/[name].js'
},
Hier sind die entsprechenden Modul config:
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}]
},
Ich habe keine Ahnung, wie kopieren index.html
aus einem Ordner und legte ihn unter dist/. Ich weiß file-loader
benötigt wird, aber was soll ich schreiben unter entry
und output
?
Dank!
Habe ich es herausgefunden und hier ist die Lösung:
output: {
path: path.resolve(__dirname, '../dist'), //this is the output directory, everything will be placed under here
filename: 'js/bundle.js', //move the bundle.js file under the js/folder, the dir structure will be like this /dist/js/bundle.js
}
Verschieben der css-Datei unter dist/css/
:
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
}]
}
Benutzte ich die ExtractTextPlugin, so in der config den Ausgabe-Pfad der css-Datei, die ich hatte, Sie zu definieren, in der plugins
Abschnitt:
plugins: [
new ExtractTextPlugin('./css/bundle.css'), //bundle.css will be put under /dist/css/
]
Verschieben, Bilder und Schriftarten auf Ihrem eigenen Ordner:
module: {
loaders: [{
test: /\.(png|jpg|svg)$/,
loader: 'url-loader?limit=8192&name=img/[name].[ext]'
}, {
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
}]
}
Darauf achten, wie die loader
string definiert ist: &name=img/[name].[ext]
bedeutet, mit den ursprünglichen Dateinamen und-Erweiterung und legen Sie es unter das img/Verzeichnis. Das gleiche gilt für die schriftart-Dateien.
Hier die komplette config-Datei:
var webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
Clean = require('clean-webpack-plugin')
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
app: path.resolve(__dirname, '../app/index.js'),
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/bundle.js',
publicPath: '/static/'
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy'],
include: path.join(__dirname, '../app'),
},{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
},{
test: /\.(woff|woff2|eot|ttf)$/,
loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
},{
test: /\.(png|jpg|svg)$/,
loader: 'url-loader?limit=8192&name=img/[name].[ext]'
}]
},
cssnext: {
browsers: 'last 2 versions'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new Clean([path.join(__dirname, '../dist')], {
root: path.join(__dirname, '..'),
verbose: true
}),
new ExtractTextPlugin('./css/bundle.css', {allChunks: true}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //ignore locale files from moment.js, saves 300k
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
},
'__DEVTOOLS__': false
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
},
mangle: false
})
]
}
Sie müssen nicht alle Sachen drin, ich will nur zeigen, das große Bild, wie es aussieht, wenn alles eingerichtet ist. Nur achten Sie auf die output
, loaders
und plugins
Du musst angemeldet sein, um einen Kommentar abzugeben.
Denke ich, es wäre eine gute Idee dies zu nutzen npm-Paket
https://github.com/gregnb/filemanager-webpack-plugin
dann so etwas wie das in Ihrem webpack config Datei verschieben kompilierte Anwendung Dateien, wo immer Sie brauchen.
Beispiel-code oben bewegt zusammengestellt SG5 Anwendungen in modulare Falcon php-Anwendung, und macht SPA index-Datei in einer Ansicht. Also Falcon könnten es verwenden, um render-SPA-Samen.
Überprüfen Sie heraus die html-webpack-plugin für webpack es wird dynamisch erstellen Sie Ihre index.html Datei und legen Sie es in einen vorgegebenen Ordner.