准备好环境：
node环境安装
首先，从Node.js官网下载对应平台的安装程序，网速慢的童鞋请移步国内镜像。
在Windows上安装时务必选择全部组件，包括勾选Add to Path。
安装完成后，在Windows环境下，请打开命令提示符，然后输入node -v，如果安装正常，你应该看到v12.14.1这样的输出，这是mac下输出：
promote:~ lhy$ node -v
v12.14.1
然后在查看npm版本 ：npm -v
promote:~ lhy$ npm -v
6.13.4
node安装后npm也就安装好了
第二：新建工作目录，进入目录后执行命令
npm init -y
就会生成一个 package.json文件
然后安装jquery 这里用到了jquery如果不用就不需要安装
命令：
npm install jquery -s
安装好之后，工作空间会多出一些文件夹或文件 如node_modules 等里面包含jquery等
新建src文件夹，在文件夹创建index.js 和index.html文件
index.html文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack打包</title>
<script src="./index.js"></script>
</head>
<body>
<!-- ui>li{这是第$个li}*8 -->
<ui>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
</ui>
</body>
</html>
index.js文件：实现各行变色
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','pink')
$('li:even').css('backgroundColor','lightblue')
})
如果这样直接运行不会出现各行变色的效果，因为它有兼容性问题，需要webpack转换：
所以我们在当前目录下安装：
npm i webpack webpack-cli -D
在根目录下新建一个webpack.config.js文件,配置如下内容，测试环境用development，打包后的文件不会压缩混淆，生产用production将会压缩混淆：
module.exports = {
//编译模式 development production
mode:'development'
}
然后在package.json文件中scripts标签下增加"dev":“webpack”：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack"
}
然后运行
npm run dev
这样就会打包出一个dist文件：
最后将打包好的dist文件引入到index.html，替换原来的./index.js：
<title>webpack打包</title>
<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>
运行index.html 查看结果：
这样就实现了变色，就不会有兼容问题了，这就是webpack基本配置。
扫一扫
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
