创建列表隔行变色项目
- 新建项目空目录，并运行npm init -y命令，初始化包管理配置文件package.json
- 新建src源代码目录
- 新建src->index.html首页
- 初始化首页基本的结构
- 运行npm install jquery -s命令，安装jQuery
- 通过模块化的形式，实现列表隔行变色效果
在项目中安装和配置webpack
- 运行npm install webpack webpack-cli -D命令，安装webpack相关的包
- 在项目目录中，创建名为webpack.config.js的webpack配置文件
- 在webpack的配置文件中，初始化如下基本配置：
创建webpack.config.js文件（在根目录中）
module.export = {
mode: 'development' // mode用来指定构建模式 （开发阶段mode的值为development；产品上线的时候mode的值为 ptoduct）
}
- 在package.json配置文件中的script节点下，新增dev脚本如下：
"script":{
"dev":"webpack"//script节点下的脚本，可以通过npm run执行
}
- 在终端中运行npm run dev命令，启动webpack进行项目打包
打包完以后就可以运行.html文件了，如果项目文件有修改的话，要重新打包在终端中运行npm run dev命令，然后运行项目
列表隔行变色的实例：
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>
</head>
<body>
<ul>
<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>
<li>这是第9个li</li>
</ul>
</body>
</html>
index.js 文件 （只打包了.js文件）
import $ from 'jquery'
$(function () {
// 奇数
$('li:odd').css('backgroundColor', 'red')
// 偶数
$('li:even').css('backgroundColor', 'lightblue')
})
配置打包的入口与出口
1. webpack的4.x版本中默认约定：
2. 打包的入口文件为src -> i ndex.js
3. 打包的输出文件为dist -> main.js
4. 如果要修改打包的入口与出口，可以在webpack.config.js中增加如下配置信息：
const path = require('path')//导入node.js中专门操作路劲的模块
module.export = {
entry:path.join(_dirname,'./src/index.js'),//打包入口文件的路径
output:{
path:path.join(_dirname,'./dist'),//输出文件的存放路径
filename:'bundle.js'//输出文件名称
}
}
实例：
- 在配置文件webpack.config.js文件中，重置打包的入口和出口：
const path = require('path')
module.exports = {
// 编译模式
mode: 'development',
/* -------------- 配置打包文件的入口与出口 （要先引入path模块）--------------- */
entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), // 输出文件的存放路径
filename: 'bundle.js' // 输出文件的名称
}
}
- npm run dev打包
- 在.index.html文件中，重新导入 打包后的输出文件：bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <script src="./index.js"></script> --> <!-- 引入打包（npm run dev）后的输出文件/dist/main.js --> <!-- <script src="../dist/main.js"></script> --> <!-- 引入打包（npm run dev）后的输出文件/dist/bundle.js --> <script src="../dist/bundle.js"></script> </head> <body> <ul> <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> <li>这是第9个li</li> </ul> </body> </html> - 运行index.html文件
配置webpack的自动打包功能
- 运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
- 修改package.json -> scripts中的dev命令如下：
"scripts":{
"dev":"webpack-dev-server"
}
- 将src -> index.html中，script脚本的引用路径，修改为"/buldle.js"
- 运行npm run dev命令，重新进行打包
运行：
在浏览器中访问http://localhost:8080地址，查看自动打包效果
注意：
webpack-dev-server会启动一个实时打包的http服务器
webpack-dev-server打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的
配置html-webpack-plugin生成预览页面
作用：打开网址后可以直接看到运行效果，不用再去找运行文件了
配置的步骤：
1、运行npm install html-webpack-plugin -D命令，安装生成预览页面插件
2、修改webpack.config.js文件头部区域，添加如下配置信息：
//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
template:'./src/index.html',//指定要用到的模板文件
filename:'index.html'//指定生成的文件名称，该文件存在于内存中，在目录中不显示
})
3、修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：
扫描二维码关注公众号，回复：
12407837 查看本文章
module.exports = {
plugins:[htmlPlugin]//plugins数组是webpack打包期间会用到的一些插件列表
}
在浏览器中输入 http://localhost:8080/ 就可以看到运行结果了。
配置自动打包相关的参数
在打包npm run dev后, 会自动打开浏览器运行，不需要手动输入网址。
//package.json中的配置
//--open打包完成后自动打开浏览器页面
//--host配置ip信息
//--port配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
},