文章目录
什么是webpack?
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具,借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
安装
方式1. 运行
npm i webpack -g
全局安装webpack,这样就能在全局使用webpack的命令
方式2. 在项目根目录中运行npm i webpack -d
安装到项目依赖
步骤
1.首先建一个自己的项目,例如:webpack
在根目录(webpack)下建立两个文件夹 dist 和 src;
src下创建文件夹如下:
2. 在根目录下输入npm init -y
初始化项目,点击回车,这时项目中会生成一个 package.json 文件。如图:
3.以我做的项目为例,实现奇偶行变色,需要用到jQuery,所以接下来下载jQuery包。npm install jquery -S
如图:
这时根目录中,会出现一个 node_modules 文件夹。注:这个文件夹里放入的都是你项目的依赖项。
4. 在 main.js 中引入 jQuery。***注:main.js文件是项目 js 入口文件。***如图:
5. 导入文件,用的是ES6导入模块方式,ES6 的代码,浏览器解析不了,所以要把他编译成,浏览器可以解析的格式。 在命令行输入webpack .\src\main.js .\dist\bundle.js
,注:后边这两个路径分别是:要打包的文件的路径 ,打包好的输出文件的路径
这时候点回车,有可能报错,报错的原因,是当前 webpack 版本的问题。
解决方法:全局下载4以下的版本,例如: npm i webpack@3.6.0 -g , 安装好后,再次输入webpack .\src\main.js .\dist\bundle.js
即可。
6.如果修改页面,每次都要重新生成且编译 main.js 文件,非常麻烦。
解决方案:在项目根目录下创建 webpack.config.js 文件。(必须这样命名) ,在里面声明入口和出口,如:
const path = require('path')
module.exports = {
//在配置文件中我们需要手动指定入口和出口
//入口 表示要使用webpack打包哪个文件
entry:path.join(__dirname,'./src/main.js'),
//出口 输出文件的相关配置
output:{
path:path.join(__dirname,'./dist'),//指定打包好的文件输入到那个目录中去
filename:'bundle.js' //指定输出文件的名称
}
}
此时在,根目录下输入命令webpack
回车:
注:这样只是比刚才生成输入命令简单,但是每次修改页面,他还是不能自己编译生成,还需要手动生成!
7.为了解决这个问题,所以我们需要安装 webpack-dev-server,在项目根目录下输入cnpm install webpack-dev-server -D
,安装本地目录,回车
这是控制台已经显示安装成功,但是两行红色报错,说的是,webpack-dev-server 需要 webpack 依赖,但是还有没下载,所以在当前目录下下载 webpack
cnpm install webpack -s
8. 在项目根目录下输入webpack-dev-server
命令,回车:
报错了不要害怕,接下来打开 package.json 文件,添加以下指令:
注:dev 是自己起的名字!
9.配置完成以后 ,输入命令npm run dev
这个时候可能会报错。
解决方案:
删除 node_modules 文件
然后 输入npm i
命令重新生成,点击回车:
注:这时也有报错,大致意思就是说没有安装依赖项 webpack
10. 输入命令 cnpm install webpack -D
11. 输入命令 npm run dev
注:这里有一个 Error ,说的是没有 webpack-cli ,我们只需安装一下就OK啦!!!!
输入命令 cnpm install webpack-cli -D
12. 输入命令 npm run dev
到这里大功告成,我们只需把地址复制到浏览器中,即可渲染自己的项目页面!!!!