Webpack 구성

웹 패키지 도구를 사용하려면 루트 디렉터리에 있는 프로필을 설정해야 합니다. 파일 이름은 기본적으로 웹 패키지입니다.condfig.js, 프로필은 웹 패키지 도구와 관련된 설정 파라미터를 포함하는 모듈 대상을 내보냅니다. 이 모듈 대상은 파라미터 형식으로 인용됩니다.

매개 변수:entry

매개변수 객체는 포털 파일의 구성을 나타냅니다.

// 
    entry: {
        demo : [baseUrl + "demo.js"],
    },

매개 변수:output

이 매개변수 객체는 도구가 파일을 패키지화하는 등의 작업을 수행한 후 출력된 파일의 저장 위치와 파일 이름 등을 포함하는 출력 구성을 나타냅니다.

// 
    output: {
        path: 'src/js',
        filename: '[name].js',
    },

매개 변수:plugins

이 매개 변수의 대상은 도구가 어떤 플러그인을 적용할지 가리키며, 모든 플러그인은 하나의 클래스로 봉인되어 있으며, 인용할 때 new 생산이 필요합니다. 예를 들어 웹 패키지/lib/optimize/Commons ChunkPlugin: 이 플러그인은 파일 간의 공공 복용 부분을 봉인하여 코드를 더욱 합리적이고 간결하게 합니다.

웹팩/lib/optimize/Commons Chunk Plugin: 이 플러그인은 파일 간의 공공 복용 부분을 봉인하여 코드를 더욱 합리적이고 간결하게 합니다.

webpack.ProvidePlugin: 이 플러그인은 모듈마다 리퀘스트가 필요한 라이브러리를 반복하지 않도록 인용된 라이브러리를 집중적으로 설정하고 모듈마다 직접 사용합니다.

// 
    plugins: [
        new CommonsChunkPlugin("common.js"),
        new webpack.ProvidePlugin({
        $ : "jquery",
        }),
    ],

매개 변수:module

이 매개 변수의 대상은 관련 마운트 설정을 가리킨다. 마운트는 매우 유용하다. 이것은 도구가 기존의 전단 자원에 대한 확장성을 확보하고 각종 전단 자원을 불러오고 해석할 수 있다. 상응하는 마운트는 npm install 설치가 필요하다.

module: {
        // 
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.(js|jsx)$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=25000'},
            { test: /\.(hbs|html)$/, loader: "handlebars"},

        ]
    },

매개 변수:resolve

이 매개 변수는 기타 기본 설정을 가리킨다

resolve: {
        // module 
        root: 'E:/github/flux-example/src', // 
        // ， require 
        extensions: ['', '.js', '.json', '.scss'],
        // ， ， 
        alias: {
            AppStore : 'js/stores/AppStores.js',//  require('AppStore')  ，
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }

모든 코드

var webpack = require('webpack');
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var baseUrl = "./src/dev/pactions/";
module.exports = {

    // 
    entry: {
        demo : [baseUrl + "demo.js"],
    },

    // 
    output: {
        path: 'src/js',
        filename: '[name].js',
    },

    // 
    plugins: [
        new CommonsChunkPlugin("common.js"),
        new webpack.ProvidePlugin({
        $ : "jquery",
        }),
    ],

    module: {
        // 
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=4096'},
            {test: require.resolve('jquery'), loader: 'expose-loader?$'},
        ]
    },
    // 
    resolve: {
        root:'G:/baseNode/baseNd/baseNd/views', // 
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};