1.首先新建一个空白文件夹,在终端打开
2.初始化包管理:执行命令npm init -y
npm init -y
执行后结果:(执行后悔自动生成一个package.json的文件)
3.新建src源代码目录,并在src下创建首页index.html,并初始化页面结构
4.安装JQuery,在终端运行下面命令:(注意是安装jquery,而不是jQuery)
npm install jquery -S
结果如下:
5。安装jQuery后,在src下l的index.js文件,并引入到index.html文件中
index.js文件代码:
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','blue')
$('li:even').css('backgroundColor','lightblue')
})
在index.html中引入index.js文件
然而引入之后刷新页面并没有看到各行变色的效果
进行打包
6.安装webpack,
npm install webpack webpack-cli --save-dev
7.在项目的根目录下,创建名为webpack.config.js的webpack配置文件,并写入配置,
这里mode有两种方式,一种是development 模式(开发模式),还有一种是 模式
在开发阶段,建议使用development模式,开发模式在项目进行打包后,看到的代码可读性较高,
另外一种模式在开发完毕之后,再使用。(打包后代码可读性不强,但是文件大小较小)
8。在package.json配置文件中的script节点下,新增Dev脚本如下:
9.打包,运行npm run dev
npm run dev
如果出现下面错误:
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'jsdom' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
@ ./node_modules/jquery/lib/node-jquery.js 5:13-29
@ ./src/index.js
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'location' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
@ ./node_modules/jquery/lib/node-jquery.js 13:24-43
@ ./src/index.js
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'navigator' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
@ ./node_modules/jquery/lib/node-jquery.js 17:25-45
@ ./src/index.js
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
@ ./node_modules/jquery/lib/node-jquery.js 8:28-53
@ ./src/index.js
检查一下jQuery是不是安装错了,上面已经提醒了,npm install jquery -S,而不是 npm install jQuery -S
安装错误,先卸载jQuery (npm uninstall jQuery),再安装(npm install jquery -S)
10.打包成功之后,会在文件列表中多一个 dist 文件夹:打开main.js就可以看到打包后的代码
11.此时,将打包生成的main.js文件引入到index.html中,保存代码刷新页面后,就可以看到列表隔行变色的效果就出来了
怎样改变打包的入口文件(index.js) 和出口文件(main.js)呢?
在webpack.config.js 配置文件中,写入以下代码就可以了
entry 写入打包文件的入口文件
output中写出口文件 ,在出口文件中需要配置文件 的存放路径和输出文件的名称。
const path = require('path')
module.exports = {
// 编译模式
mode:'development',
// 配置打包的入口和出口文件
entry: path.join(__dirname,'./src/index.js'),
output:{
// 输出文件的存放路径
path:path.join(__dirname,'./dist'),
// 输出文件的名称
filename:'bundle.js'
}
}
此时再次运行 npm run dev ,结果如下:(dist文件夹下新增bundle.js文件),
将bundle.js引入到index.html文件中,刷新页面后,项目正常运行
如果想改变每一行的颜色,在改变js代码之后,需要重新运行npm run dev。若多次改变js代码,就需要跟品盘的重新打包,此时
配置webpack的自动打包配置
12.安装支持项目自动打包的工具webpack-dev-server
npm install webpack-dev-server --save-dev
13.成功之后,在package.json配置文件中修改scripts中的dev 为:webpack-dev-server
14.将src下的index.html文件中的script脚本的引用路径改为 "/bundle.js"
15.运行 npm run dev 重新进行打包
16.从上面可以看到项目运行在 httpa;//localhost:8080/上,进入可看到:
点击箭头所指src,可打开index.html页面,看到下面结果:
【注】: webpack-dev-server会启动一个实时打包的http服务器
webpack-dev-server 打包生成的输出文件,默认放到了项目 的根目录汇总,而且是虚拟的,
直接预览页面
17.安装可以直接预览页面的插件。html-webpack-plugin
npm install html-webpack-plugin --save-dev
18.安装成功之后,配置webpack.config.js配置文件(//***************之间的代码)
const path = require('path')
// ******************
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html'
})
//******************
module.exports = {
// 编译模式
mode:'development',
// 配置打包的入口和出口文件
entry: path.join(__dirname,'./src/index.js'),
output:{
// 输出文件的存放路径
path:path.join(__dirname,'./dist'),
// 输出文件的名称
filename:'bundle.js'
},
//*************************
plugins:[htmlPlugin]
//***************************
}
19.配置完毕后,重新运行项目,
npm run dev
运行成功后,直接打开http://loaclhost:8080/页面,就可以看到预览页面了
运行项目成功之后,自动调出浏览器显示页面
20.在package.json中的scripts下配置
"dev": "webpack-dev-server --open"
21.如果想改变ip地址和端口号,按以下方式配置:(host配置IP地址,port配置端口号)
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"