前提条件:配置好了node.js环境。
先打开vscode,打开项目文件夹,同时打开终端。输入代码
npm init -y
进行初始化。初始化完成后,会出现一个叫package.json文件,里面有相关配置信息。
因为这是一个前端项目,所以需要创建一个src文件夹,同时创建相关的html、css、JavaScript文件。并写入自己的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我是第1个项目</li>
<li>我是第2个项目</li>
<li>我是第3个项目</li>
<li>我是第4个项目</li>
<li>我是第5个项目</li>
<li>我是第6个项目</li>
<li>我是第7个项目</li>
<li>我是第8个项目</li>
<li>我是第9个项目</li>
<li>我是第10个项目</li>
</ul>
</body>
</html>
这个例子采用jquery,所以需要安装jquery包。调出终端,在终端写上
cnpm i jquery -S
进行jquery的安装。
其中,最后面有相关参数:-s -d -g
-S——生产环境安装
-D——开发模式安装
-g——全局环境安装
安装后会出现一个文件夹,里面有jquery的包。
4.写上JavaScript代码。
// javascript代码
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','lightblue');
$('li:even').css('backgroundColor','white');
})
5.运行一下,发现报错:
原因是:
import $ from 'jquery'
属于es6语法,并不是所有浏览器都能支持es6语法。因此,使用webpack来处理。
开始安装webpack,在终端输入:
cnpm i webpack webpack-cli -D
备注:-d模式可以自选,这里选用生产模式。
接着需要配置,在自己的项目文件夹里面创建一个文件:webpack.config.js
同时在里面写上相关配置基础代码。
module.exports = {
mode:'development' /*这里有两个参数可以修改,一个是development,一个是production。
development生产环境,编辑比较快;
production需要较长时间编译,但是会对代码进行压缩,挺高性能*/
}
但是,webpack如何进行打包呢?仍然需要使用npm命令进行打包。这里需要对package.json文件进行配置。
{
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC"
}
实际上只在script加了一条代码:实际上就是将webpack重命名为dev。
"dev":"webpack"
保存后,在终端输入
npm run dev
执行一下,可以看到终端执行了webpack命令。
但报错了,同时生成的dist文件夹里面没有相关的内容(main.js)。
查阅相关资料,发现原来是webpack4.0以上版本可以不需要用配置文件来进行打包。
https://www.cnblogs.com/windowsxpxp/p/12950466.html
https://www.cnblogs.com/tassel/p/12038104.html
参考上面资料,决定继续采用文件配置进行打包。于是修改了配置文件的代码。
const path = require('path');
module.exports = {
entry:'./src/test.js',
mode:'development', /*这里有两个参数可以修改,一个是development,一个是production。
development生产环境,编辑比较快;
production需要较长时间编译,但是会对代码进行压缩,挺高性能*/
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}
}
重复之前执行终端代码。
npm run dev
得到结果,说明打包成功了。
同时可以看到出现dis文件夹,里面有main.js文件
这就是模块化后的js文件,在html中可以直接调用。
备注:在这里我使用的是手动配置执行webpack,webpack4.0以上版本已经可以不需要手动配置了。
默认情况下,
入口为:./src/index.js文件
出口为:./dist/main.js文件
所以不用创建webpack.config.js文件,直接配置好webpack文件然后执行终端指令就行了。
npm run dev
打开浏览器看看:
成功解决了问题。