javascript - webpack 合并的时候怎么不处理第三方js，例如jquery

Question

app.js

module.exports = {
    get:function(){
        return 'max'
    }

}

main.js

var app =require('./app.js');
var J=require('./jquery-latest.js');
J('p').text(app.get()) ;

webpack.config.js

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    }
};

请问我不想合并jquery，我怎么过滤掉jquery，合并它

Answer 1

用官方插件 webpack.IgnorePlugin 把不想 bundle 的文件排除掉就好。Example:

javascriptvar webpack = require('webpack');
var ignoreFiles = new webpack.IgnorePlugin(/\.\/jquery-last.js$/);
module.exports = {
    entry: './main',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    plugins: [ignoreFiles]
}

参考: IgnorePlugin

Answer 2

是把jquery这些第三方库单独拿出来吗？可以指定两个入口。

javascriptvar config = {
    entry: {
        app: '妮自己的代码入口',
        vendor: ['jquery'] //第三方库
    },
    output: {
        filename: '这是妮自己打包后生成的文件名',
        path: ''
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery'
        }),//这个可以使jquery变成全局变量，妮不用在自己文件require('jquery')了
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')//这是妮第三方库打包生成的文件
    ]
}

Answer 3

使用externals关键字：

module.exports = {
    entry:{
        'index':'./src/js/index.js',
        'index2':'./src/js/index2.js',
        'index3/index3':'./src/js/index3.js'
    },
    output:{
        path:'dist/js/',
        publicPath:'dist/',
        filename:'[name].js'
    },
    module:{
        loaders:[{
            test:/\.css$/,
            loader:'style-loader!css-loader'
        },{
            test:/\.html$/,
            loader:'html-loader'
        }]
    },
    externals:{
        'Zepto':'window.Zepto',
        '$':'window.Zepto',
        'JavascriptInterface':'window.JavascriptInterface'
    },
    resolve:{
        extensions:['','.js','.json','.coffee']
    },
    plugins:[commonsPlugin]
}