引入requireJS库文件，在webpack.config.js文件中怎么配置？分析下另一个webpack文件配置

Question

我想引入requireJS的库文件，请问怎么在webpack.config.js文件中配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
var config  = {
    //此处指明路口文件位置
    entry: './main.js',   //设置入口文件
    // 配置打包结果，
    // path配置定义了输出的文件位置
    // filename则定义了打包结果文件的名称
    devtool: 'inline-source-map',
    output: {//输出目录
        filename: 'bundle.js',//设置导出文件为index.js
        path: path.resolve(__dirname, 'dist')//打包后的js文件存放的地方
    },
    //设置本地服务器端口号为9001，此端口可以自己设定，但记住不能与其他服务端口重复
    devServer:{
        // 默认webpack-dev-server会为根文件夹提供本地服务器
        // 如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录
        // contentBase: './dist',//tell the dev server where to look for files

        // historyApiFallback: true, //不跳转

        hot: true,
        inline:true,
        port:7700

    },
    // resolve:影响对模块的解析，一个对象
        // extensions：自动补全识别后缀，是一个数组

    plugins: [// 定义插件，一个数组
        new webpack.HotModuleReplacementPlugin()
    ],
    //定义了对模块的处理逻辑，这里可以用loaders定义一系列的加载器，以及一些正则，
    //当需要加载的文件匹配test的正则时，会调用后面的loader对文件进行处理，
    //所以这就是webpack骚的可怕的地方。。。。。
    module:{
        loaders:[
        //rules:[
            {
                test:/\.jsx?$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                query:{
                    presets:['es2015','react']
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

module.exports = config;

这个一个其他项目的webpack配置，我想问点东西

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; //提取公共库
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var pkg = require('./package.json');
var CW_NODE_ENV = process.env.CW_NODE_ENV;

var config = {
    entry: {
        'main': path.resolve(__dirname, 'src/main.js'),
        'ssologin': path.resolve(__dirname, 'src/ssologin.js'),
        'vender':[
            'react',
            'react-dom',
            'react-router',
            'react-intl',
            'redux',
            'react-redux',
            'redux-thunk',
            'whatwg-fetch',
            'antd',
            'jquery',
            'echarts',
            'intl',
            'react-window-resize-listener',
            'element-resize-event',
            'async-validator'
        ]
    },

    output: {
        path: path.resolve(__dirname, 'static'),
        filename: '[name].js',
        publicPath: 'static/',
        chunkFilename: "chunk/[name].chunk.js" // 用于异步加载require.ensure使用
    },
    resolve: {
        alias: {
            'SRC_PATH': __dirname + '/src',
            'GEO_PATH': __dirname + '/mapGeo',
        },
        modules: ['node_modules', 'src']
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                exclude: /(node_modules|bower_components)/,
                test: /\.js?$/,
                query: {
                    presets: [
                        'es2015', // 编译ES6
                        'react',    //编译jsx
                        'stage-0'   //ES7一些提案的支持
                    ],
                    plugins: [
                        //['import', {libraryName: "antd", style: true}],
                    ]
                }
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!less-loader'
                })
                //loader: 'style-loader!css-loader!less-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&publicPath=img/&outputPath=img/' //  <= 8kb的图片base64内联
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=8192&publicPath=fonts/&outputPath=fonts/'
            }
        ]
    },
    plugins: [
        //第一个参数vender和entry中vender名称对应，第二个参数是输出的文件名称
        new CommonsChunkPlugin({
            name: 'vender',
            filename: '[name].js'
        }),
        new ExtractTextPlugin({
            filename: '[name].css'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(CW_NODE_ENV || 'development') // production
        }),

        //需要暴露到全局使用的vendor列表
        new webpack.ProvidePlugin({
            //第三方的全局变量
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            ReactDOM: "react-dom",
            React: "react",
            _: "lodash",
            echarts: "echarts",
            //自定义的全局变量  --比如config env等
            //ENV: 'config/env'

        })
    ],
    devServer:{
        disableHostCheck:true
    }
};

if (CW_NODE_ENV == 'production') {
    config.plugins.push(
        new UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    );
}

module.exports = config;

vender 是什么东西，不懂

        'vender':[
            'react',
            'react-dom',
            'react-router',
            'react-intl',
            'redux',
            'react-redux',
            'redux-thunk',
            'whatwg-fetch',
            'antd',
            'jquery',
            'echarts',
            'intl',
            'react-window-resize-listener',
            'element-resize-event',
            'async-validator'
        ]
    }

[name]是什么意思，这三个插件是什么东西？

new CommonsChunkPlugin({
            name: 'vender',
            filename: '[name].js'
        }),
        new ExtractTextPlugin({
            filename: '[name].css'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(CW_NODE_ENV || 'development') // production
        })

Answer 1

回答第一个问题：为什么要引用requireJS？它是用来做模块化开发的，那你还用webpack干嘛？一个项目里你打算用两套模块化方案吗？
回答第二个问题：这里vendor是要配合下面的CommonsChunkPlugin用的，用来分离第三方库。原先我们的第三方库和业务逻辑代码会打包在一个js中，用了CommonsChunkPlugin之后就可以将第三方库的文件统一打包到另外一个叫vender.js里面。具体配置可参考webpack的官网相应的介绍https://webpack.js.org/plugin...
回答第三个问题：[name]就是一种模板的写法呀！把name这个变量塞到字符串中。关于每个name
代表什么值？自己编译出来看看文件名，自己摸索摸索！ExtractTextPlugin用来做css的分割，原先是是打包在入口js中，现在将其单独打包到一个css文件中。具体配置还是看官网。webpack.DefinePlugin是用来定义全局常量的，具体说明官网也有的。
总结：多去看看官网，webpack的官网说明的还是比较详细的。虽然是全英文，找有道翻译、百度翻译这些英语大神帮你翻译一下啊！

Answer 2

在webpack 中引入了 require.js 这个库 主要是想使用require对于非模块化js的垫片功能，其次有引入的三方js 这个三方js 这个三方js依赖性很强 且必须远程加载。
试了好几种写法 require.js 中的语法 依然会被转成webpack的语法

?