我正在将项目从使用Grunt迁移到使用Webpack。该项目使用jQuery。我注意到即使我尚未将jQuery添加到package.json
中,捆绑的代码也能正常工作,这似乎很奇怪。
看着webpack --mode=development --display-modules
的输出,我看到了:
[../../../../../../../node_modules/jquery/dist/jquery.js] /Users/rothomas/node_modules/jquery/dist/jquery.js 274 KiB {index} [built]
也就是说,似乎在某个时候我运行了npm install --global jquery
,而Webpack正在导入该jQuery。我不希望发生这种情况,因为我的队友/服务器不会在$HOME
中安装jQuery。
一个明显的解决方案是对我来说,只是从我的$HOME/node_modules
中删除jQuery(不知道它如何到达那里),这将导致Webpack失败,直到我按预期将其添加到package.json
中。
但是我想知道:
-
为什么 Webpack使用
$HOME/node_modules
?我知道这是Node包解析器的默认行为,但由于我想象许多其他开发人员会将他们的项目嵌套在$HOME
下,因此这似乎很容易出错。 -
如何指定Webpack尝试解析模块的范围?
(我看过Webpack的documentation on resolvers,但对我来说不是很清楚。)
这是我当前的Webpack配置:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function pathTo(filepath) {
return path.join(__dirname,filepath);
}
module.exports = function (env,argv) {
return {
entry: {
'index': [
pathTo('src/scripts/index.js'),pathTo('src/scss/index.scss'),]
},module: {
rules: [
{
exclude: /node_modules/,loader: 'babel-loader',options: {
presets: [
'@babel/env'
]
},test: /\.js$/,},{
test: /\.(scss|css|sass)$/,use: [
{
loader: MiniCssExtractPlugin.loader,{
loader: 'css-loader',options: {
url: false,{
loader: 'sass-loader',options: {
sassOptions: {
outputStyle: 'expanded',],output: {
filename: '[name].js',path: pathTo('web'),plugins: [
new MiniCssExtractPlugin()
],}
}