Webpack을 통해 전 세계로 자바 스크립트 라이브러리 가져 오기

Question

내 HTML에서 자바 스크립트 라이브러리 용 스크립트 태그를 제거하려고하고 있으므로 템플릿 페이지에서 underscore.js가 제거되었습니다.

, 나는이

import 'underscore'; 

나는이 작업을 수행 할 때 50K에 의해 파일이 증가 bundle.js 출력 웹팩의 크기에 따라 한 내하는 index.js (웹팩 엔트리 포인트) 내에서,이 교체, 그래서하려면 라이브러리가 bundle.js에 있음을 확인하십시오. 그러나 bundle.js가 포함 된 페이지의 콘솔에서 사용하려고하면 밑줄을 사용할 수 없습니다.

의견을 보내 주시면 감사하겠습니다. 이 웹팩 플러그인을 사용할 수 있음을 달성하기 위해

const webpack = require('webpack'); 
const path = require('path'); 
const precss = require('precss'); 
const autoprefixer = require('autoprefixer'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const postcssImport = require('postcss-import'); 

module.exports = { 

    context: __dirname + '/frontend', 
    devtool: 'source-map', 
    entry: './index.js', 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, './static'), 
    }, 
    module: { 
    loaders: [ 
    { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } }, 
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&importLoaders=1!postcss') }, 
    ], 
    }, 
    vendor: [ 
    'underscore', 
    ], 
    plugins: [ 
    new ExtractTextPlugin('si-styles.css'), 
    new webpack.ProvidePlugin({ 
     underscore: 'underscore', 
    }), 
    ], 
    postcss: function(webpack) { 
    return [ 
     postcssImport({ addDependencyTo: webpack }), // Must be first item in list 
     precss, 
     autoprefixer({ browsers: ['last 2 versions'] }), 
    ]; 
    }, 

}; 

Answer 1

: 그런데 그것에 의해

new webpack.ProvidePlugin({ 
    underscore: "underscore" 
}) 

는 디렉토리의 인덱스 파일의 라이브러리를 가져올 필요는 없다. 당신은 또한 당신의 웹팩 설정 파일의 새로운 엔트리 포인트를 지정하는 라이브러리에 액세스 할 수 있습니다 .. 그런 다음 이렇게 같은 vendor.js의 boundle의 모든 공급 업체 코드를 넣을 수 있습니다 :

entry: { 
    main: [ 
     './app/js/main.js' 
    ], 
    vendor: [ 
      'underscore', 
      'lodash', 
      'my-awesome-library!' 
     ] 
    } 

UPDATE를 : 매우가있다 egghead.io에서 웹팩을 사용하는 방법에 대한 좋은 자습서. check it out을 사용해보십시오!