Ich möchte in der Lage sein, Dateien zu 1 Datei zu minimieren und zu verketten, ohne grunt verwenden How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) kann ich dies mit nur Webpack erreichen? Ich habe viele verschiedene Kombinationen ausprobiert, aber das Problem sind einige der Bibliotheken, die ich verwende, vorausgesetzt, es ist AMD oder CommonJS-Format, so dass ich weiterhin Fehler bekomme.Wie verkette ich und reduziere Dateien mit webpack
Antwort
ja, man kann es minify mit webpack wie diesem ist das
module.exports = {
// static data for index.html
metadata: metadata,
// for faster builds use 'eval'
devtool: 'source-map',
debug: true,
entry: {
'vendor': './src/vendor.ts',
'main': './src/main.ts' // our angular app
},
// Config for our build files
output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
resolve: {
// ensure loader extensions match
extensions: ['','.ts','.js','.json','.css','.html','.jade']
},
module: {
preLoaders: [{ test: /\.ts$/, loader: 'tslint-loader', exclude: [/node_modules/] }],
loaders: [
// Support for .ts files.
{
test: /\.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 -> Duplicate identifier
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [ /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/ ]
},
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },
// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader' },
// support for .jade as raw text
{ test: /\.jade$/, loader: 'jade' }
// if you add a loader include the resolve file extension above
]
},
plugins: [
new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }),
// new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['main', 'vendor'] }),
// static assets
new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
// generating html
new HtmlWebpackPlugin({ template: 'src/index.html', inject: false }),
// replace
new DefinePlugin({
'process.env': {
'ENV': JSON.stringify(metadata.ENV),
'NODE_ENV': JSON.stringify(metadata.ENV)
}
})
],
// Other module loader config
tslint: {
emitErrors: false,
failOnHint: false
},
// our Webpack Development Server config
devServer: {
port: metadata.port,
host: metadata.host,
historyApiFallback: true,
watchOptions: { aggregateTimeout: 300, poll: 1000 }
},
// we need this due to problems with es6-shim
node: {global: 'window', progress: false, crypto: 'empty', module: false, clearImmediate: false, setImmediate: false}
};
sieht Beispiel minify und Concat für angular2 webpack
vielleicht können Sie lesen es https://github.com/petehunt/webpack-howto erste
Sie müssen bei der Verwendung von Webpack keine Dateien verketten, da Webpack dies standardmäßig ausführt.
Webpack generiert eine Bundle-Datei, die alle Dateien enthält, die Sie in Ihrem Projekt benötigt haben.
Webpack verfügt über eine integrierte in UglifyJs Unterstützung (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)
Guchene mein Projekt ist jetzt eine HTML-Datei mit der ganze Reihe von Skript-Tags Ich möchte nur Listen von js-Dateien geben und webpack Verkettung haben und minimieren. –
Ich möchte definitiv mehrere völlig unabhängige Dateien (Shims) zu einem verketten. Sag mir nicht "Du musst keine Dateien verketten". – MaxXx1313
dieses Plugin versuchen, Ziele und minify js ohne webpack verketten:
Webpack 3 wird jetzt nicht unterstützt :(jede andere Alternative? –
mehrere CSS in einzelne Datei Merge kann getan werden mit extract-text-webpack-plugin oder webpack-merge-and-include-global.
https://code.luasoftware.com/tutorials/webpack/merge-multiple-css-into-single-file/
Um mehrere JavaScripts in einzelne Datei ohne AMD oder Commonjs Wrapper webpack-Merge-and-Include-global verwendet, kann getan werden fusionieren. Alternativ können Sie diese umschlossenen Module als globalen Bereich unter Verwendung von expose-loader verfügbar machen.
Beispiel unter Verwendung von webpack-merge-and-Include-global.
const path = require('path');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new MergeIntoSingleFilePlugin({
"bundle.js": [
path.resolve(__dirname, 'src/util.js'),
path.resolve(__dirname, 'src/index.js')
],
"bundle.css": [
path.resolve(__dirname, 'src/css/main.css'),
path.resolve(__dirname, 'src/css/local.css')
]
})
]
};
Was ich am Ende tun war Liste all der Code, den ich in Eintrag wie dieser 'Eintrag minify will: { Anbieter: [ 'file.js', 'file2.js',‚file3.js '] } ' –
Dies funktioniert nicht für mich ... es exportiert nur die letzte Datei ... Ich weiß nicht, was Webpack mit den ersten tut ... –