웹팩 2 : 다른 파일

Question

로 분할 라이브러리, 공급 업체 및 응용 프로그램은 내가 lodash, 순간, Axios의, 이 반응을 포함하여 타사 모듈을 많이 사용하는 다양한 응용 프로그램을 상상해보십시오.

모든 것을 묶음 끝에 묶으면 크기가 1MB보다 커집니다. 별도로

1. lodash
2. 별도로 순간
3. 다른 모든 node_modules을 공급 업체에 저장됩니다 :
   나는 그것을 저장하는 것을 방법으로 내 라이브러리 팩을 웹팩을 원한다 번들
4. 응용 프로그램의 코드는 별도의 파일
에 저장됩니다.

CommonsChunkPlugin과 다른 방법으로 시도했지만 원하는 결과를 얻지 못했습니다.

내 문제를 설명하기 위해 예를 들어 저장소를 준비했습니다

: https://github.com/PavelPolyakov/webpack-react-bundles

웹팩 항목 부분은 (여기

entry: { 
    lodash: 'lodash', 
    moment: 'moment', 
    app: [ 
     'react-hot-loader/patch', 
     'webpack-dev-server/client?http://localhost:3001', 
     'webpack/hot/only-dev-server', 
     './app/index.js'] 
} 

conf/webpack.base.config.js): 모듈 분리하기 위해 노력하고, 생산 설정 (conf/webpack.production.config.js)입니다 :

을

plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: function (module) { 
       // this assumes your vendor imports exist in the node_modules directory 
       return module.context && 
        module.context.indexOf('node_modules') !== -1; 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize: true, 
      compress: { 
       warnings: true 
      } 
     })] 

이 경우 순간과 로다시는 여전히 판매 업체에 표시됩니다. 또는 번들. 나는 그들을 두 개의 묶음으로 묶고 싶다.

모든 의견을 감사드립니다.

Answer 1

CDN에서 포함하고 external을 사용하는 것이 가장 쉽습니다.

이것은 코드 분할마다 정의 된 것이 아니고 달성하려는 목표에 매우 근접 할 수 있습니다. 번들 크기를 줄입니다. 다른 사이트에서 이미 캐싱 된 CDN 버전을 사용하는 사용자가 있다는 장점이 있습니다. 끝에

Answer 2

내가 GitHub의 문제에 @sokra에서 도움을받은 : 같은 문제에 직면 할 것이다 사람들을 위해 https://github.com/webpack/webpack/issues/4638

, 여기 질문에 설명 된 문제를 해결 전체 웹팩 설정은 다음과 같습니다

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: { 
     app: ['./app/index.js'] 
    }, 
    output: { 
     filename: '[name].bundle.js', 
     sourceMapFilename: '[name].bundle.map', 
     path: path.resolve(__dirname, './dist') 
    }, 
    devServer: { 
     port: 3001, 
     contentBase: path.resolve(__dirname, './dist'), 
     historyApiFallback: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: [ 
        { 
         loader: 'babel-loader', 
         options: { 
          presets: [['es2015', { 'modules': false }], 'react'], 
          plugins: ['transform-async-to-generator', 
           'transform-decorators-legacy', 
           'transform-runtime', 
           'react-html-attrs', 
           'react-hot-loader/babel'], 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.css/, 
       use: ['style-loader', 'css-loader', 'postcss-loader'] 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2|gif|jpg|png)$/, 
       use: 'file-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html', 
      inject: "body" 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize: true, 
      compress: { 
       warnings: true 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: (m) => /node_modules/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'lodash', 
      minChunks: (m) => /node_modules\/(?:lodash|moment)/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'moment', 
      minChunks: (m) => /node_modules\/(?:moment)/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "manifest", 
      minChunks: Infinity 
     }) 
    ], 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    devtool: 'source-map' 
} 

도와 주신 모든 분들께 감사드립니다.