tutorial script page create body app javascript node.js webpack

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:

  1. npm install --save-dev uglify-js
  2. Utilice el paquete web de forma normal, por ejemplo, creando un archivo ./dst/bundle.js .
  3. Agrega un comando de build a tu package.json :

    "scripts": { "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map" }

  4. 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.