webpack中使用第三方插件（jQuery）

一：通过npm安装的jQuery

1. npm install --save-dev jquery
2. 在webpack的plugins里面配置jquery

plugins: [
    // 使用jQuery（npm管理）
    new webpack.ProvidePlugin({
        $: 'jquery'
    })
]

二：jQuery是放在本地自己管理的目录里面

1. 在webpack.config.js配置resolve把jQuery解析到想要的目录

// 配置resolve把jQuery解析到想要的目录

resolve: {
    alias: {
        jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
    }
},

2. 在webpack的plugins里面配置jquery

plugins: [
    // 使用jQuery（npm管理）
    new webpack.ProvidePlugin({
        $: 'jquery'
    })
]

三：通过imports-loader加载

1. 安装imports-loader
2. 在webpack.config.js配置resolve把jQuery解析到想要的目录

// 配置resolve把jQuery解析到想要的目录

resolve: {
    alias: {
        jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
    }
},

3. 在module的rules里面配置规则

{  // 加载jQuery
    test: path.resolve(__dirname, 'src/app.js'),
    use: [
        {
            loader: 'imports-loader',
            options: {
                $: 'jquery'
            }
        }
    ]
}

4. 全部配置

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    // 入口
    entry: {
        app: './src/app.js'
    },

    // 输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]-bundle-[hash:5].js'  // 带hash值得js
    },

    // 配置resolve把jQuery解析到想要的目录

    resolve: {
        alias: {
            jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
        }
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',  // 可以把css放在页面上
                        options: {
                            singleton: true, // 使用一个style标签
                            transform: './css.transform.js' // transform 是css的变形函数,相对于webpack.config的路径
                        }
                    },
                    {
                        loader: 'css-loader',   // 放在后面的先被解析
                        options: {
                            minimize: true,
                            modules: true,
                            localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                    },
                    {
                        loader: 'less-loader'
                    }
                    
                ]
            },
            {  // 加载jQuery
                test: path.resolve(__dirname, 'src/app.js'),
                use: [
                    {
                        loader: 'imports-loader',
                        options: {
                            $: 'jquery'
                        }
                    }
                ]
            }
            
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',  // 文件地址
            filename: 'index.html',  // 生成文件名字
            // inject: false,    // 不把生成的css，js插入到html中
            chunks: ['app'],  //指定某一个入口，只会把入口相关载入html
            minify: {  // 压缩html
                collapseWhitespace: true   // 空格
            }
        })
    ]
};