Webpack üretim kodu nasıl oluşturulur ve nasıl kullanılır

97

Web paketinde çok yeniyim, üretim yapısında genel kodun boyutunu azaltabileceğimizi öğrendim. Şu anda web paketi yaklaşık 8MB dosya ve main.js yaklaşık 5MB oluşturuyor. Üretim yapısında kodun boyutu nasıl küçültülür? İnternetten örnek bir web paketi yapılandırma dosyası buldum ve uygulamam için yapılandırdım ve çalıştırdım npm run buildve oluşturmaya başladım ve ./dist/dizinde bazı dosyalar oluşturdu .

  1. Yine de bu dosyalar ağırdır (geliştirme sürümüyle aynı)
  2. Bu dosyalar nasıl kullanılır? Şu anda uygulamayı çalıştırmak için webpack-dev-server kullanıyorum.

package.json dosyası

{
  "name": "MyAPP",
  "version": "0.1.0",
  "description": "",
  "main": "src/server/server.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
  ],
  "author": "Iam",
  "license": "MIT",
  "homepage": "http://example.com",
  "scripts": {
    "test": "",
    "start": "babel-node src/server/bin/server",
    "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
  },
  "dependencies": {
    "scripts" : "", ...
  },
  "devDependencies": {
    "scripts" : "", ...
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, public_dir , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    plugins
  ],
  module: {
    loaders: [loaders]
  }
};

webpack.production.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
console.log(path.join(__dirname, 'src/frontend' , 'index.html'));

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/frontend' , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [plugins],
  resolve: {
    root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')],
    extensions: ['', '.js', '.css']
  },

  module: {
    loaders: [loaders]
  }
};
node.js  reactjs  npm  webpack  webpack-dev-server 
— Gilson PJ
kaynak
1
Son sorunuza bir cevap buldunuz mu? "Bu dosyalar nasıl kullanılır? Şu anda uygulamayı çalıştırmak için webpack-dev-server kullanıyorum."
— Randy
5
İnternet, web paketinden önce çok daha iyiydi, sadece bu soruya ve cevaba bakın.
— Randy L

Yanıtlar:

66

Eklentileri @Vikramaditya tarafından önerildiği şekilde ekleyebilirsiniz. Daha sonra üretim yapısını oluşturmak için. Komutu çalıştırmalısın

webpack -p --config ./webpack.production.config.js

Web -ppaketine bir üretim yapısı oluşturmasını söyler. Üretim bayrağını eklemek için package.json'daki derleme komut dosyasını değiştirmeniz gerekir .

— Sandeep
kaynak
7
tamam teşekkürler. bir sonraki şüphem, üretim kodunu nasıl çalıştıracağım? Yukarıdaki komutu çalıştırdığımda dist dizininde bazı dosyalar oluşturuyor. tamam başarıyla derlendi. şimdi bu dosyalar nasıl kullanılır? geliştirme modunda 'npm start' kullandım ve başladı.
— Gilson PJ
Senin src/server/bin/server. Daha sonra dosyalara nasıl hizmet ettiğini bulabilir ve belki onu değiştirebilirsiniz. Yapacağını düşündüğüm şey, dosyaları oluşturmak ve ardından onlara hizmet etmek için webpack çalıştırmaktır. Bu dosyanın koduna bir göz atın.
— sandeep
@Vikramaditya içeri senaryo bana yardımcı olabilir stackoverflow.com/questions/40993795/msbuild-and-webpack
— lohiarahul
@GilsonPJ, bu UI dosyalarının nasıl kullanılacağını buldunuz mu?
— Randy
Önce web paketini kurmanız gerekirnpm install webpack
— Peter Rader
43

Bu soruya izleyici sayısını gözlemledikten sonra Vikramaditya ve Sandeep'den bir yanıt almaya karar verdim.

Üretim kodunu oluşturmak için oluşturmanız gereken ilk şey, aşağıdaki gibi optimizasyon paketleri ile üretim yapılandırmasıdır:

  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

Daha sonra package.json dosyasında, bu üretim yapılandırması ile oluşturma prosedürünü yapılandırabilirsiniz.

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

şimdi yapıyı başlatmak için aşağıdaki komutu çalıştırmanız gerekiyor

npm run build

Üretim derleme konfigürasyonuma göre, web paketi kaynağı ./distdizine oluşturacak.

Artık UI kodunuz ./dist/dizinde mevcut olacak . Sunucunuzu, bu dosyalara statik varlıklar olarak hizmet verecek şekilde yapılandırın. Bitti!

— Gilson PJ
kaynak
7
Son cümlende ne demek istiyorsun? Bu kodlar nasıl sağlanır? Node.js'nin kendi içinde bir sunucu oluşturduğunu biliyorum. Ama dosyayı ./dist/dizine aldıktan sonra nasıl çalıştırabilirim ?
— newguy
6
Sadece bir not, uglifyJS eklentisinin üstüne -p seçeneğinin eklenmesi, iki kez çirkinleştirmeye çalışırken sorunlara neden olur. -P cli seçeneğinin kaldırılması bu sorunları benim için
— çözdü
'NODE_ENV' dahili veya harici bir komut, çalıştırılabilir program veya toplu iş dosyası olarak tanınmaz.
— Anton Duzenko
2
Bu kabul edilen cevap olmalı, çünkü hiç kimse web sitesine nasıl hizmet verileceğini söylemiyordu Artık UI kodunuz ./dist/ dizininde mevcut olacak. Sunucunuzu, istek için bu UI kodunu sağlayacak şekilde ayarlayın. ve bitirdiniz.!
— jperelli
3
Hala "Sunucunuzu istek için bu UI kodunu sağlayacak şekilde ayarlayın. Ve işiniz bitti." Burada ne yapmak istediğimizi anlıyorum ama nasıl yapacağımı bilmiyorum
— Randy
42

Üretim yapınızı optimize etmek için şu eklentileri kullanın:

  new webpack.optimize.CommonsChunkPlugin('common'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

Son zamanlarda , boyutunu küçültmek için çıktı paketinizi gzip eden sıkıştırma-web paketi-eklentisi hakkında bilgi sahibi oldum . Üretim kodunuzu daha da optimize etmek için bunu yukarıda listelenen eklentiler listesine ekleyin.

new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
})

Sunucu tarafı dinamik gzip sıkıştırması, yoğun CPU kullanımı nedeniyle statik istemci tarafı dosyaları sunmak için önerilmez.

— Vikramaditya
kaynak
1
'common.js' bölümü commonschuckplugin'de ne yapar? bu eklenti benim için kavraması en zor olanı.
— Echiban
2
CommonsChunkPlugin, ortak kodu tüm parçalarınızdan çıkarır ve ayrı bir dosyaya koyar common.js.
— Vikramaditya
3
Bu cevap artık webpack sürüm 4 için geçerli değil
— Dennis
20

Bunu kendim öğreniyorum. İkinci soruyu cevaplayacağım:

  1. Bu dosyalar nasıl kullanılır? Şu anda uygulamayı çalıştırmak için webpack-dev-server kullanıyorum.

Webpack-dev-server kullanmak yerine, sadece bir "ekspres" çalıştırabilirsiniz. npm install "express" kullanın ve projenin kök dizininde bir server.js oluşturun, şuna benzer:

var path = require("path");
var express = require("express");

var DIST_DIR = path.join(__dirname, "build");
var PORT = 3000;
var app = express();

//Serving the files on the dist folder
app.use(express.static(DIST_DIR));

//Send index.html when the user access the web
app.get("*", function (req, res) {
  res.sendFile(path.join(DIST_DIR, "index.html"));
});

app.listen(PORT);

Ardından, package.json dosyasına bir komut dosyası ekleyin:

"start": "node server.js"

Son olarak, uygulamayı çalıştırın: npm run startsunucuyu başlatmak için

Ayrıntılı bir örnek şu adreste görülebilir: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (örnek kod en son paketlerle uyumlu değildir, ancak çalışacaktır küçük ayarlarla)

— Siyuan Jiang
kaynak
2
Eğer nodejs, expressjs vb. Şeyleri öğrenmeye başladıysanız size anlatmak istiyorum. Bu soru ileri düzey bir sorudur. Bu sadece bu dosyaların nasıl çalıştırılacağı ile ilgili değildir. Üretim kodunun nasıl küçültüleceği (sıkıştırılacağı) ve bu sıkıştırılmış kodun nasıl çalıştırılacağı içindir
— Arpit
1
@Arpit Bunu işaret ettiğiniz için teşekkürler. Bunda çok yeniyim Sıkıştırılmış kod oluşturulduktan sonra çalışan yöntemin aynı olması gerektiğini varsaydım.
— Siyuan Jiang
9

Webpack.config.js dosyanızda param almak için argv npm modülünü ( npm install argv --save çalıştırarak kurun ) kullanabilirsiniz ve üretim için -p bayrağı "build": "webpack -p" kullanabilirsiniz. webpack.config.js dosyasına aşağıdaki gibi koşul ekleyin

plugins: [
    new webpack.DefinePlugin({
        'process.env':{
            'NODE_ENV': argv.p ? JSON.stringify('production') : JSON.stringify('development')
        }
    })
]

Ve bu kadar.

— Hayk Ağabekyan
kaynak
1
Bunun yerine kullanınprocess.argv.indexOf('-p') != -1
— AjaxLeung
@AjaxLeung: argvwebpack yapılandırma dosyasına eklemelisiniz:const argv = require('argv');
— kadam
6

Bu sana yardım edecek.

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new ExtractTextPlugin("bundle.css", {allChunks: false}),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false,
      },
      exclude: [/\.min\.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), ///programming/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],
— Khalid Azam
kaynak
5

Gilson PJ cevabına ek olarak:

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

ile 

"scripts": {
    "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js"
},

çünkü kodunuzu iki kez çirkinleştirmeye çalışır. Daha fazla bilgi için https://webpack.github.io/docs/cli.html#production-shortcut-p adresine bakın .

Bunu, UglifyJsPlugin'i eklenti dizisinden kaldırarak veya OccurrenceOrderPlugin'i ekleyerek ve "-p" işaretini kaldırarak düzeltebilirsiniz. bu yüzden olası bir çözüm

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.OccurrenceOrderPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

ve 

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},
— Putzi San
kaynak
3

Webpack.dev.config ve webpack.prod.config'inizde çok sayıda yinelenen kodunuz varsa, isProdyalnızca belirli durumlarda belirli özellikleri etkinleştirmek için bir boole kullanabilir ve yalnızca tek bir webpack.config.js dosyasına sahip olabilirsiniz.

const isProd = (process.env.NODE_ENV === 'production');

 if (isProd) {
     plugins.push(new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/index.ts": "environments/index.prod.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json"
    }));
    plugins.push(new UglifyJsPlugin({
      "mangle": {
        "screw_ie8": true
      },
      "compress": {
        "screw_ie8": true,
        "warnings": false
      },
      "sourceMap": false
    }));
  }

Bu arada: DedupePlugin eklentisi Webpack'ten kaldırıldı. Yapılandırmanızdan kaldırmalısınız.

GÜNCELLEME:

Önceki cevabıma ek olarak:

Kodunuzu yayınlanmak üzere gizlemek istiyorsanız, enclosejs.com'u deneyin . Şunları yapmanızı sağlar:

  • kaynak olmadan uygulamanızın yayın sürümünü oluşturun
  • kendi kendine açılan bir arşiv veya yükleyici oluşturun
  • Kapalı kaynak GUI uygulaması yapın
  • Varlıklarınızı yürütülebilir dosyanın içine koyun

İle kurabilirsiniz npm install -g enclose

— MatthiasSommer
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.