Webpack 프로덕션 코드 빌드 방법 및 사용 방법

95

저는 webpack을 처음 접했고 프로덕션 빌드에서 전체 코드의 크기를 줄일 수 있다는 것을 알았습니다. 현재 webpack은 약 8MB 파일과 약 5MB의 main.js를 빌드합니다. 프로덕션 빌드에서 코드 크기를 줄이는 방법은 무엇입니까? 인터넷에서 샘플 웹팩 구성 파일을 찾았고 내 응용 프로그램에 대해 구성하고 실행 npm run build하고 빌드를 시작했으며 ./dist/디렉토리에 일부 파일을 생성했습니다 .

  1. 여전히이 파일은 무겁습니다 (개발 버전과 동일)
  2. 이 파일을 사용하는 방법? 현재 저는 webpack-dev-server를 사용하여 응용 프로그램을 실행하고 있습니다.

package.json 파일

{
  "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
소스
1
마지막 질문에 대한 답을 찾았습니까? "이러한 파일을 사용하는 방법? 현재 응용 프로그램을 실행하기 위해 webpack-dev-server를 사용하고 있습니다."
— Randy
4
웹팩 이전에는 인터넷이 훨씬 더 좋았습니다.이 질문과 답을보세요.
— Randy L

답변:

65

@Vikramaditya가 제안한대로 플러그인을 추가 할 수 있습니다. 그런 다음 프로덕션 빌드를 생성합니다. 명령을 실행해야합니다.

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

는 -p생산 빌드를 생성하는 웹팩 알려줍니다. 프로덕션 플래그를 포함하도록 package.json 의 빌드 스크립트를 변경해야합니다 .

— Sandeep
소스
6
알았어 고마워. 내 다음 의심은 프로덕션 코드를 실행하는 방법입니다. 위의 명령을 실행하면 dist 디렉토리에 일부 파일이 생성됩니다. 좋아, 성공적으로 컴파일되었습니다. 이제이 파일을 사용하는 방법? 개발 모드에서 나는 'npm start'를 사용하고 시작되었습니다.
— Gilson PJ
당신은 당신에 가면 src/server/bin/server. 그런 다음 파일을 제공하는 방법을 파악하고 변경할 수 있습니다. 내가 할 것이라고 생각하는 것은 파일을 빌드하고 제공하기 위해 webpack을 실행하는 것입니다. 이 파일의 코드를 살펴보십시오.
— sandeep
@Vikramaditya 당신의 시나리오를 도와 줄 수 stackoverflow.com/questions/40993795/msbuild-and-webpack
— lohiarahul
@GilsonPJ이 UI 파일을 사용하는 방법을 알아 냈습니까?
— Randy
다음을 사용하여 첫 번째 웹팩 설치해야npm install webpack
— 피터 레이더
43

이 질문에 대한 시청자 수를 관찰 한 후 Vikramaditya와 Sandeep의 답변을 결론 내리기로 결정했습니다.

프로덕션 코드를 빌드하려면 먼저 다음과 같은 최적화 패키지를 사용하여 프로덕션 구성을 만들어야합니다.

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

그런 다음 package.json 파일에서이 프로덕션 구성으로 빌드 절차를 구성 할 수 있습니다.

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

이제 빌드를 시작하려면 다음 명령을 실행해야합니다.

npm run build

내 프로덕션 빌드 구성에 따라 webpack은 소스를 ./dist디렉토리에 빌드합니다 .

이제 UI 코드를 ./dist/디렉토리 에서 사용할 수 있습니다 . 이러한 파일을 정적 자산으로 제공하도록 서버를 구성하십시오. 끝난!

— Gilson PJ
소스
7
마지막 문장에서 무슨 뜻입니까? 이 코드를 제공하는 방법은 무엇입니까? 나는 node.js가 자체적으로 서버를 구축한다는 것을 알고 있습니다. 그러나 ./dist/디렉토리에 파일이있는 후 어떻게 실행할 수 있습니까?
— newguy
6
참고로 uglifyJS 플러그인 위에 -p 옵션을 추가하면 두 번 uglify를 시도하므로 문제가 발생합니다. -p cli 옵션을 제거하면 이러한 문제가 해결되었습니다
— timelf123
'NODE_ENV'는 내부 또는 외부 명령, 작동 가능한 프로그램 또는 배치 파일로 인식되지 않습니다.
— 안톤 Duzenko
2
아무도 웹 사이트를 제공하는 방법을 말하지 않았기 때문에 이것이 허용되는 대답이어야합니다. 이제 UI 코드를 ./dist/ 디렉토리에서 사용할 수 있습니다. 요청에 대해 이러한 UI 코드를 제공하도록 서버를 설정하십시오. 그리고 당신은 끝났습니다.!
— jperelli
2
여전히 "요청에 대해 이러한 UI 코드를 제공하도록 서버를 설정하십시오. 완료되었습니다." 나는 우리가 여기에 수행 할 작업을 이해하지만, 난 그냥 그것을 할 방법을 모른다
— 랜디
42

다음 플러그인을 사용하여 프로덕션 빌드를 최적화하십시오.

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

최근에 출력 번들을 gzip하여 크기를 줄이는 compression-webpack-plugin 에 대해 알게되었습니다 . 프로덕션 코드를 더욱 최적화하려면 위에 나열된 플러그인 목록에도 추가하십시오.

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

서버 측 동적 gzip 압축은 CPU 사용량이 많기 때문에 정적 클라이언트 측 파일을 제공하는 데 권장되지 않습니다.

— Vikramaditya
소스
1
commonschuckplugin에서 'common.js'부분은 무엇을합니까? 그 플러그인은 내가 이해하기 가장 어렵습니다.
— Echiban
2
CommonsChunkPlugin은 모든 청크에서 공통 코드를 추출하여 별도의 파일에 저장합니다 common.js.
— Vikramaditya
3
이 답변은 웹팩 버전 4에 더 이상 유효하지 않습니다.
— Dennis 19
20

직접 배우는 것뿐입니다. 두 번째 질문에 답하겠습니다.

  1. 이 파일을 사용하는 방법? 현재 저는 webpack-dev-server를 사용하여 응용 프로그램을 실행하고 있습니다.

webpack-dev-server를 사용하는 대신 "express"를 실행할 수 있습니다. npm install "express"를 사용하고 다음과 같이 프로젝트의 루트 디렉토리에 server.js를 만듭니다.

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);

그런 다음 package.json에서 스크립트를 추가합니다.

"start": "node server.js"

마지막으로 앱 실행 : npm run start서버 시작

자세한 예는 https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ 에서 볼 수 있습니다 (예제 코드는 최신 패키지와 호환되지 않지만 작동합니다. 약간의 조정으로)

— 장 시위 안
소스
2
nodejs, expressjs 등을 배우기 시작했다면 말하고 싶습니다. 이 질문은 사전 수준 질문입니다. 이 파일을 실행하는 방법 만이 아닙니다. 프로덕션 코드를 최소화 (압축)하는 방법과 압축 된 코드를 실행하는 방법
— Arpit
1
@Arpit 지적 해 주셔서 감사합니다. 나는 이것에 아주 새로운 것입니다. 압축 코드가 생성되면 실행 방법이 동일해야한다고 가정했습니다.
— Siyuan Jiang
9

webpack.config.js 파일에서 매개 변수를 가져 오기 위해 argv npm 모듈 ( npm install argv --save 를 실행 하여 설치 )을 사용할 수 있으며 프로덕션에서는 -p 플래그 "build": "webpack -p" 를 사용할 수 있습니다. 아래와 같이 webpack.config.js 파일에 조건을 추가합니다.

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

그리고 그게 다야.

— 하이 크 아가베 키안
소스
1
대신 사용process.argv.indexOf('-p') != -1
— AjaxLeung
@AjaxLeung : argvwebpack 설정 파일 에 포함시켜야 합니다 :const argv = require('argv');
— kadam
6

이것은 당신을 도울 것입니다.

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
    })
  ],
— 칼리드 아잠
소스
5

Gilson PJ 답변 외에도 :

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

와 

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

코드를 두 번 어리석게 만들려고합니다. 자세한 내용은 https://webpack.github.io/docs/cli.html#production-shortcut-p 를 참조하십시오.

plugins-array에서 UglifyJsPlugin을 제거하거나 OccurrenceOrderPlugin을 추가하고 "-p"플래그를 제거하여이 문제를 해결할 수 있습니다. 그래서 한 가지 가능한 해결책은

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

과 

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},
— Putzi San
소스
2

webpack.dev.config 및 webpack.prod.config에 중복 코드가 많은 경우 부울 isProd을 사용하여 특정 상황에서만 특정 기능을 활성화하고 webpack.config.js 파일이 하나만있을 수 있습니다.

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
    }));
  }

그건 그렇고 : DedupePlugin 플러그인은 Webpack에서 제거되었습니다. 구성에서 제거해야합니다.

최신 정보:

내 이전 답변 외에도 :

릴리스를 위해 코드를 숨기려면 enclosejs.com을 시도 하십시오 . 다음을 수행 할 수 있습니다.

  • 소스없이 애플리케이션의 릴리스 버전 만들기
  • 자동 압축 풀기 아카이브 또는 설치 프로그램 만들기
  • 폐쇄 소스 GUI 애플리케이션 만들기
  • 실행 파일 안에 자산을 넣으십시오.

다음과 함께 설치할 수 있습니다. npm install -g enclose

— MatthiasSommer
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.