webpack常见用法（三）

引入第三方插件

• 1.直接引入 比较麻烦
• 2.插件引入（ProvidePlugin） 不能在全局下使用

new webpack.ProvidePlugin({
    '_':"ladash",
})

• 3.expose-loader

{
    test:require.resolve('lodash'),
    loader:'expose-loader',
    options:{
        exposes:{
            globalName: "_",
            override: true,
        }
    }
}

• 4.CDN 需要手动引入，而且不管代码有没有用到都会引入

// 如果已经通过cdn引入了此包，就可以通过配置external来配置，打包后的文件中不包含此依赖文件
external:{
    loadsh:'_',
}

• 5.html-webpack-externals-plugin 按需加载cdn

new HtmlWebpackExternalsPlugin({
    module:'lodash',// 依赖名
    entry:'cnd地址',
    gloal:'_'// 全局变量名
})

• DefinePlugin创建一些编译时可以配置的全局常量
  设置环境变量

"script":{
    "build":"webpack --env=production"//设置生产环境的环境变量
}
/****************************************************************/
new webpack.DefinePlugin({// 定义全局变量
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify('5fa3b9'),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: '1+1',
    'typeof window': JSON.stringify('object'),
    'process.env.NODE_ENV': JSON.stringify