一：通過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里面配置規(guī)則

{  // 加載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標(biāo)簽
                            transform: './css.transform.js' // transform 是css的變形函數(shù),相對于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'],  //指定某一個入口，只會把入口相關(guān)載入html
            minify: {  // 壓縮html
                collapseWhitespace: true   // 空格
            }
        })
    ]
};