웹 팩 을 포장 하고 지정 한 위치 로 파일 을 불 러 옵 니 다.

웹 팩 으로 포장 하면 가장 시원 한 것 은 바로 require 파일 을 사용 할 수 있 습 니 다. 하지만 이것 은...
동시에 문 제 를 가 져 왔 습 니 다. 모든 파일 이 통합 되면 이 가방 은 너무 큽 니 다.
이 를 바탕 으로 웹 팩 의 포장 (주로 우리 가 필요 로 하 는 콘 텐 츠 모듈 을 어떻게 분리 하여 포장 하 는 지 알 아 보 겠 습 니 다.
그리고 저희 가 설정 한 저장 경로 에 따라 저장 합 니 다)
우선 웹 팩. config. js 파일 에서
entry 입구 함 수 는 js 패키지 로 따로 포장 해 야 하 는 것 을 표시 합 니 다.

entry: {
        main: path.resolve(__dirname,'src/index.js'),
        jq: ['jquery'],
        react: ['react'],
        redom: ['react-dom']
},

output: {
        path: path.resolve(__dirname,'dist'),
        publishPath: 'dist/',
        filename: '[name].js'
    },
plugin: [
     new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
     new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
     new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]

위 설정 과 같이 파일 생 성 시 dist 디 렉 터 리 에 jq. js, vendors. js, redom. js 세 개의 js 가 추 가 됩 니 다.
。
이상 은 우리 가 여러 개의 가방 을 포장 해 야 하 는 문 제 를 해결 했다.그러면 우리 가 포장 한 js 를 지정 한 위치 에 저장 하려 면 어떻게 조작 해 야 합 니까? 조급해 하지 마 세 요. 다음은 구체 적 으로 하 겠 습 니 다.
다음 과 같은 실현 (사실 차 이 는 주로 entry 입구 함수 에 있 습 니 다):

entry: {
        './common/main': path.resolve(__dirname,'src/index.js'),
        './jquery/jq': ['jquery'],
        './react/react': ['react'],
        './reactdom/redom': ['react-dom']
    },

위 에서 보 듯 이 네 개의 js 는 우리 가 만 든 dist 아래 네 개의 폴 더 에 각각 저장 된다.이때
webpack. optimize. Commons ChunkPlugin 플러그 인 을 사용 해 야 합 니 다)
마지막 으로 좌우 웹 팩. config. js 코드 를 붙 입 니 다.

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        './common/main': path.resolve(__dirname,'src/index.js'),
        './jquery/jq': ['jquery'],
        './react/react': ['react'],
        './reactdom/redom': ['react-dom']
    },
    output: {
        path: path.resolve(__dirname,'dist'),
        publishPath: 'dist/',
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            },
            {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
                loader: 'babel'
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url?limit=40000'
            }
        ]
    },
    babel: {
        presets: ['es2015','stage-0','react'],
        plugins: ['transform-runtime',["antd",{"style": "css"}]]
    },
    resolve: ['js','jsx','css'],
    plugins:[
      new webpack.ProvidePlugin({
         $:"jquery",
         jQuery:"jquery",
         "window.jQuery":"jquery"
     })
    //  new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
    //  new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
    //  new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
    ]
};