J'essaie d'utiliser webpack-4 pour obtenir la version de production de react (le projet n'est pas créé avec l'application Create React), mais sans succès. Mon projet utilise du typographie et utilise ts-loader et utilise la version de React 15.6.2.
Le fichier de configuration actuel du webpack
const path = require("path");
const webpack = require("webpack");
const TerserPlugin = require('terser-webpack-plugin');
var config = {
entry: ['./lib/tproj/js/index.ts'],
output: {
filename: './dist/tproj/js/bundle.js'
},
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [
/lib\/tests/,
/lib\/tproj\/elasticsearch/,
/lib\/tproj\/expressserver/
],
loader: "ts-loader"
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}
]
},
mode: 'production',
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
chunks: 'all',
}
}
};
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.devtool = 'source-map';
}
if (argv.mode === 'production') {
config.devtool = 'false';
}
return config;
}
;
J'ai essayé de le modifier comme suit ça ne marche toujours pas.
const path = require("path");
module.exports = {
entry: ['./lib/tproj/js/index.ts'],
output: {
filename: './dist/tproj/js/bundle.js'
},
devtool: "source-map",
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [
/lib\/tests/,
/lib\/tproj\/elasticsearch/,
/lib\/tproj\/expressserver/
],
loader: "ts-loader"
},
{
test: /\.js$/,
enforce: "pre",
loader: "source-map-loader"
}
]
}
};
Encore un débutant dans le webpack et React. Merci d'avance pour toute aide ou suggestion.
4 Réponses :
React contient un commutateur dans le fichier index.js entre les versions dev et prod.
Vérifiez la valeur process.env.NODE_ENV dans votre code après la compilation.
Dans la configuration de votre pack Web, ajoutez ceci au tableau des plugins.
var config = {
entry: ['./lib/tproj/js/index.ts'],
output: {
filename: './dist/tproj/js/bundle.js'
},
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [
/lib\/tests/,
/lib\/tproj\/elasticsearch/,
/lib\/tproj\/expressserver/
],
loader: "ts-loader"
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}
]
},
mode: 'production',
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
chunks: 'all',
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
};
Ceci définit la variable d'environnement appropriée pour react pour exécuter la version de production.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
mode: 'production' définit process.env.NODE_ENV à production . Regardez-le ici webpack.js.org/configuration/mode/#usage
Merci pour toutes les suggestions et aide les gars, le problème était que le fichier bundle.js n'était pas créé, j'avais récemment mis à jour la version de webpack vers 4
Donc au lieu de
output: {
path: path.resolve(__dirname, "./dist/tproj/js/"),
filename: "bundle.js",
},
Utiliser cela a fonctionné pour moi
output: {
filename: './dist/tproj/js/bundle.js'
},
Assurez-vous que le bundle.js est modifié lorsque vous exécutez webpack
Assurez-vous simplement que vous exécutez webpack avec la commande suivante:
webpack --mode = production?@ luke-webdev oui c'est vrai .. J'exécute webpack avec --mode = production