关于webpack安装及安装出现的错误的解决办法
1. 先说下什么是WebPack?
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任,目前已经到了4.x版本。
打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任。
2. 安装WebPack
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"
},
如果还是报不是内部指令,则重新安装低版本 npm i webpack-dev-server@2.9.1
npm install --save-dev webpack
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)