【Web前端基础】webpack全局安装失败怎么办？

Posted 2023-04-19

WebPack的安装，采用的是命令行npm形式的安装。
d://切到d盘
mkdir webpack_demo//在d盘下新建webpack_demo文件夹
cd webpack_demo//进入该文件夹下
npm install -g webpack //全局安装webpack
（备注如果这样安装会出现提示安装webpack-cli；这是4.x的提示，如果不想安装webpack-cli需重新安装低版本webpack）
npm uninstall -g webpack //先卸载之前安装的webpack
npm install -g webpack@3.6.0 //安装低版本webpack
全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，
初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，
包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。
npm init//初始化项目，可以一路回车生成的package.json文件
npm install --save-dev webpack@3.6.0 //官方不太支持全局安装，会锁定版本，因此对项目目录安装
安装完成后可以查看版本号 webpack -v
安装完成后新建webpack.config.js配置文件基本配置
const path = require(‘path’);

const uglify = require(‘uglifyjs-webpack-plugin’);//代码压缩
module.exports=
//入口文件的配置项

entry:

entry:'./src/entry.js',

//这里我们又引入了一个入口文件

entry2:'./src/entry2.js'

,

//出口文件的配置项

output:

//输出的路径，用了Node语法

path:path.resolve(__dirname,'dist'),

//输出的文件名称

filename:'[name].js'

,

//模块：例如解读CSS,图片如何转换，压缩

module:

rules: [



test: /\.css$/,

use: [ 'style-loader', 'css-loader' ]//处理样式的loader



]

,

//插件，用于生产模版和各项功能

plugins:[

new uglify()//代码压缩

],

//配置webpack开发服务功能

devServer:

//设置基本目录结构

contentBase:path.resolve(__dirname,'dist'),

//服务器的IP地址，可以使用IP也可以使用localhost

host:'localhost',

//服务端压缩是否开启

compress:true,

//配置服务端口号,可自定义

port:1717




（备注：安装webpack-dev-server时安装完后，运行报不是内部指令，需要在package.json中配置下）
“scripts”:
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"12345

,
如果还是报不是内部指令，则重新安装低版本 npm i webpack-dev-server@2.9.1
npm install --save-dev webpack 参考技术A

换成其他源安装试下

webpack4 怎么集成jquery

安装jquery,安装到当前项目下

npm install jquery --save --save-exact

在main.js中引入并且使用jquery

打开webpack项目下的main.js，添加一下内容

import \'jquery/dist/jquery.min.js\'

这样就在整个项目（全局）下添加了jquery，每个组件都可以使用jQuery了

参考技术A 考虑使用 shim alias 配置 参考技术B 直接使用Npm安装即可。