programing

제품 코드 구축 방법 및 사용 방법 웹 팩

luckcodes 2023. 2. 12. 00:00

제품 코드 구축 방법 및 사용 방법 웹 팩

저는 웹 팩을 처음 접하기 때문에 프로덕션 빌드에서는 전체 코드의 크기를 줄일 수 있다는 것을 알게 되었습니다.8MB의 main.js의 main.js의 main.js의 mapan.js의 mapan.js의 mapan.mapan.js의 mapan.인터넷에서 웹하고 실행하였습니다.npm run build몇되었습니다../dist/디렉토리로 이동합니다.

  1. 그래도 이 파일들은 무겁다(개발 버전과 동일).
  2. 이 파일들을 어떻게 사용하는가?현재 webpack-dev-server를 사용하여 응용 프로그램을 실행하고 있습니다.

패키지.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.syslog

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

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

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

NODE_ENV=production webpack --config ./webpack.production.config.js

「 」를 하고 있는 babel , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 앞에 .BABEL_ENV=node위의 명령어로 이동합니다.

이 질문에 대한 시청자 수를 관찰한 후 나는 Vikramaditya와 Sandeep의 답변을 마무리하기로 결정했다.

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

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

그럼 포장지에 넣어주세요.json 파일 이 프로덕션 구성을 사용하여 빌드 절차를 구성할 수 있습니다.

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

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

npm run build

웹 ../dist디렉토리로 이동합니다.

UI 를 UI에서 할 수 있게 되었습니다../dist/디렉토리로 이동합니다.이러한 파일을 정적 자산으로 처리하도록 서버를 구성합니다. ★★★★★★★★★★★★★★★★!

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

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

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

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

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

나 혼자 이걸 배우고 있어.두 번째 질문에 대답하겠습니다.

  1. 이 파일들을 어떻게 사용하는가?현재 webpack-dev-server를 사용하여 응용 프로그램을 실행하고 있습니다.

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

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

그럼 포장지에 넣어주세요.json, 스크립트 추가:

"start": "node server.js"

마지막으로 앱을 실행합니다.npm run start서버를 기동하다

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

webpack.config.js 파일에서 param을 가져오기 위해 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')
        }
    })
]

그리고 그게 다야.

이게 도움이 될 거야

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$/]), //https://stackoverflow.com/questions/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
    })
  ],

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 를 참조해 주세요.

이 문제는 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"
},

webpack.dev.config와 webpack.prod.config에 중복된 코드가 많이 있는 경우 부울을 사용할 수 있습니다.isProd특정 상황에서만 특정 기능을 활성화하고 단일 webpack.config.config.config 파일을 가진 경우

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

참고로:중복 제거 플러그인이 웹 팩에서 제거되었습니다.Configuration에서 삭제해야 합니다.

갱신:

이전 답변에 덧붙여:

릴리스용으로 코드를 숨기고 싶은 경우는, enclosejs.com 를 사용해 주세요.다음과 같은 이점이 있습니다.

  • 소스 없이 응용 프로그램의 릴리스 버전을 만듭니다.
  • 자동 압축 아카이브 또는 설치 프로그램 생성
  • 클로즈드 소스 GUI 응용 프로그램 만들기
  • 자산을 실행 파일에 저장

를 사용하여 설치할 수 있습니다.npm install -g enclose

Webpack 5를 포함한 최신 답변

웹 팩의 경우(버전이 기억나지 않음)

NODE_ENV=production webpack --config ./webpack.production.config.js

웹팩 <4>의 경우

plugins: [
    new webpack.DefinePlugin({
        'process.env':{
            'NODE_ENV': JSON.stringify('production')
                        //for development -> JSON.stringify('development')
        }
    })
]

웹 팩 > = 4(웹 팩 5 포함)의 경우 - 지정mode

 module.exports = {
   mode: 'production', //for development -> development
   devtool: 'inline-source-map',
   ...
 };

Webpack 공식 웹사이트에서 인용

webpack v4 이후 모드를 지정하면 DefinePlugin이 자동으로 구성됩니다.

언급URL : https://stackoverflow.com/questions/35054082/webpack-how-to-build-production-code-and-how-to-use-it

저작자표시 (새창열림)

'programing' 카테고리의 다른 글

LINQ를 JSON으로 설정할 수 있습니까?  (0) 2023.04.03
초기 자동 에이잭스 호출 사용 안 함 - DataTable 서버 측 페이징  (0) 2023.02.12
Woocommerce에서 체크아웃 필드를 생성하는 제품 수량에 따른 ACF 리피터  (0) 2023.02.11
css에서 요소를 사용하여 요소가 투영기에 있는지 확인합니다.  (0) 2023.02.11
워드프레스에서 세션 변수를 사용하는 방법은 무엇입니까?  (0) 2023.02.11

'programing'의 다른글

  • 현재글제품 코드 구축 방법 및 사용 방법 웹 팩

관련글

댓글

티스토리툴바