一：通过npm安装的jQuery
- npm install --save-dev jquery
- 在webpack的plugins里面配置jquery
plugins: [
// 使用jQuery（npm管理）
new webpack.ProvidePlugin({
$: 'jquery'
})
]
二：jQuery是放在本地自己管理的目录里面
- 在webpack.config.js配置resolve把jQuery解析到想要的目录
// 配置resolve把jQuery解析到想要的目录
resolve: {
alias: {
jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
}
},
- 在webpack的plugins里面配置jquery
plugins: [
// 使用jQuery（npm管理）
new webpack.ProvidePlugin({
$: 'jquery'
})
]
三：通过imports-loader加载
- 安装imports-loader
- 在webpack.config.js配置resolve把jQuery解析到想要的目录
// 配置resolve把jQuery解析到想要的目录
resolve: {
alias: {
jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
}
},
- 在module的rules里面配置规则
{ // 加载jQuery
test: path.resolve(__dirname, 'src/app.js'),
use: [
{
loader: 'imports-loader',
options: {
$: 'jquery'
}
}
]
}
- 全部配置
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 // 空格
}
})
]
};
