javascript - script - ¿Cómo construir un paquete minified y descomprimido con webpack?
webpack-- w (12)
Aquí está mi webpack.config.js
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.min.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};
Estoy construyendo con
$ webpack
En mi carpeta dist
, sólo estoy recibiendo
-
bundle.min.js
-
bundle.min.js.map
También me gustaría ver el bundle.js
sin bundle.js
webpack entry.jsx ./output.js -p
Funciona para mí, con la bandera -p
.
De acuerdo con esta línea: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117
debe ser algo como:
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: false
})
]
};
De hecho, puede tener varias compilaciones exportando diferentes configuraciones de acuerdo con sus estrategias env / argv.
En mi opinión, es mucho más fácil usar la herramienta UglifyJS directamente:
-
npm install --save-dev uglify-js
- Utilice el paquete web de forma normal, por ejemplo, creando un archivo
./dst/bundle.js
. Agrega un comando de
build
a tupackage.json
:"scripts": { "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map" }
- Siempre que desee crear un paquete, así como un código uglified y sourcemaps, ejecute el
npm run build
.
No es necesario instalar uglify-js globalmente, solo instálelo localmente para el proyecto.
Para agregar otra respuesta, la bandera -p
(abreviatura de --optimize-minimize
) habilitará UglifyJS con los argumentos predeterminados.
No obtendrá un paquete minificado y sin procesar de una sola ejecución ni generará paquetes con nombres diferentes, por lo que la -p
puede no coincidir con su caso de uso.
A la inversa, la opción -d
es la abreviatura de --debug
--devtool sourcemap
--output-pathinfo
Mi webpack.config.js omite devtool
, debug
, pathinfo
y el complemento minmize a favor de estas dos banderas.
Puede crear dos configuraciones para webpack, una que minimiza el código y otra que no (solo elimine la línea optimice.UglifyJSPlugin) y luego ejecute ambas configuraciones al mismo tiempo $ webpack && webpack --config webpack.config.min.js
Puede definir dos puntos de entrada en la configuración de su paquete web, uno para su js normal y el otro para un js minificado. Luego debe enviar su paquete con su nombre y configurar el complemento UglifyJS para incluir los archivos min.js. Vea el ejemplo de configuración de webpack para más detalles:
module.exports = {
entry: {
''bundle'': ''./src/index.js'',
''bundle.min'': ''./src/index.js'',
},
output: {
path: path.resolve(__dirname, ''dist''),
filename: "[name].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: //.min/.js$/,
minimize: true
})
]
};
Después de ejecutar webpack, obtendrá bundle.js y bundle.min.js en su carpeta dist, sin necesidad de un complemento adicional.
Puede formatear su webpack.config.js así:
var debug = process.env.NODE_ENV !== "production";
var webpack = require(''webpack'');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./entry.js",
output: {
path: __dirname + "/dist",
filename: "library.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};''
Y luego, para compilarlo sin ejecutar (mientras está en el directorio principal del proyecto):
$ webpack
Para construirlo minified ejecute:
$ NODE_ENV=production webpack
Notas: Asegúrese de que, para la versión no minificada, cambie el nombre del archivo de salida a library.js
y para la library.min.js
minified.min.js para que no se sobrescriban entre sí.
Puede usar un solo archivo de configuración e incluir el complemento UglifyJS condicionalmente usando una variable de entorno:
var webpack = require(''webpack'');
var PROD = JSON.parse(process.env.PROD_ENV || ''0'');
module.exports = {
entry: ''./entry.js'',
devtool: ''source-map'',
output: {
path: ''./dist'',
filename: PROD ? ''bundle.min.js'' : ''bundle.js''
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
})
] : []
};
y luego simplemente configura esta variable cuando quieras minimizarla:
$ PROD_ENV=1 webpack
Editar:
Como se mencionó en los comentarios, NODE_ENV
se usa generalmente (por convención) para indicar si un entorno particular es un entorno de producción o de desarrollo. Para comprobarlo, también puede establecer var PROD = (process.env.NODE_ENV === ''production'')
, y continuar normalmente.
Puedes ejecutar webpack dos veces con diferentes argumentos:
$ webpack --minimize
luego verifique los argumentos de la línea de comandos en webpack.config.js
:
var path = require(''path''),
webpack = require(''webpack''),
minimize = process.argv.indexOf(''--minimize'') !== -1,
plugins = [];
if (minimize) {
plugins.push(new webpack.optimize.UglifyJsPlugin());
}
...
ejemplo webpack.config.js
Tal vez unminified-webpack-plugin tarde aquí, pero tengo el mismo problema, por lo que escribí un unminified-webpack-plugin para este propósito.
Instalación
npm install --save-dev unminified-webpack-plugin
Uso
var path = require(''path'');
var webpack = require(''webpack'');
var UnminifiedWebpackPlugin = require(''unminified-webpack-plugin'');
module.exports = {
entry: {
index: ''./src/index.js''
},
output: {
path: path.resolve(__dirname, ''dist''),
filename: ''library.min.js''
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new UnminifiedWebpackPlugin()
]
};
Al hacer lo anterior, obtendrá dos archivos library.min.js y library.js. No es necesario ejecutar el webpack dos veces, ¡simplemente funciona! ^^
Tuve el mismo problema, y tuve que satisfacer todos estos requisitos:
- Minified + Non minified version (como en la pregunta)
- ES6
- Multiplataforma (Windows + Linux).
Finalmente lo resolví de la siguiente manera:
webpack.config.js:
const path = require(''path'');
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = getConfiguration;
function getConfiguration(env) {
var outFile;
var plugins = [];
if (env === ''prod'') {
outFile = ''mylib.dev'';
plugins.push(new MinifyPlugin());
} else {
if (env !== ''dev'') {
console.log(''Unknown env '' + env + ''. Defaults to dev'');
}
outFile = ''mylib.dev.debug'';
}
var entry = {};
entry[outFile] = ''./src/mylib-entry.js'';
return {
entry: entry,
plugins: plugins,
output: {
filename: ''[name].js'',
path: __dirname
}
};
}
paquete.json:
{
"name": "mylib.js",
...
"scripts": {
"build": "npm-run-all webpack-prod webpack-dev",
"webpack-prod": "npx webpack --env=prod",
"webpack-dev": "npx webpack --env=dev"
},
"devDependencies": {
...
"babel-minify-webpack-plugin": "^0.2.0",
"npm-run-all": "^4.1.2",
"webpack": "^3.10.0"
}
}
Entonces puedo construir por (No te olvides de npm install
antes):
npm run-script build
webpack.config.js :
const webpack = require("webpack");
module.exports = {
entry: {
"bundle": "./entry.js",
"bundle.min": "./entry.js",
},
devtool: "source-map",
output: {
path: "./dist",
filename: "[name].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: //.min/.js$/,
minimize: true
})
]
};
Desde Webpack 4, webpack.optimize.UglifyJsPlugin
ha quedado en desuso y su uso da como resultado un error:
Se ha eliminado webpack.optimize.UglifyJsPlugin, por favor use config.optimization.minimize
Como lo explica el manual , el complemento se puede reemplazar con la opción de minimize
. Se puede proporcionar una configuración personalizada al complemento especificando la instancia de UglifyJsPlugin
:
const webpack = require("webpack");
const UglifyJsPlugin = require(''uglifyjs-webpack-plugin'');
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
include: //.min/.js$/
})]
}
};
Esto hace el trabajo para una configuración simple. Una solución más efectiva es usar Gulp junto con Webpack y hacer lo mismo en una sola pasada.