版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83187672
1. 全局安装webpack
命令：npm i webpack -g或npm i webpack webpack-cli -g
2.cd到对应文件目录下
命令：cd /d E:\......
3.创建 package.json 初始项目文件
命令：npm init -y
Project name 项目名
Project description 项目名描述
Author 作者邮箱
Use ESLint to lint your code? 是否需要ESlist语法检查
Setup unit tests with Karma + Mocha? 是否需要单元测试
Setup e2e tests with Nightwatch? Yes是否需要e2e测试
4.项目框架之类的引入（例如：jquery）
命令：npm i jquery
5.cd项目下局部安装webpack
局部命令：npm i webpack -s或npm i webpack webpack-cli -s
6.实际打包案例
webpack的作用：
- 1.webpack 能够处理 js 文件的互相依赖关系；
- 2.webpack 能够处理 js 兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能正常识别的语法
1.命令符打包（不推荐）：
将 main.js 文件打包为 bundle.js
注意：输出文件要加上：--output
命令打包语法格式：webpack 要打包的文件路径 --output 打包好输出的文件路径（及名字）
webpack .\src\main.js --output .\dist\bundle.js
html
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="main.js"></script>-->
<!-- 因为 main 中的代码，涉及到了ES6的新语法，但是浏览器不识别 -->
<!-- 通过 webpack 这个前端构建工具，把 main.js 做了一下处理，
生成一个 bundle.js 的文件-->
<script src="../dist/bundle.js"></script>
<!-- 注意：不推荐在这里引用任何包和任何css文件 -->
</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>
<li>这是第10个li</li>
</ul>
</body>
main.js(入口文件)
//这个 main.js 是我们项目的 JS 入口文件
// 1.导入 JQuery
// import *** from *** 是 ES6 中导入模块的方式
// 由于 ES6 的代码太高级了，浏览器解析不了，所以这一行代码报错
import $ from 'jquery';
$(function () {
$('li:odd').css('backgroundColor', 'lightblue');
$('li:even').css('backgroundColor', function () {
return "#" + 'D97634'
})
});
2.配置文件打包（推荐）：
webpack.config.js：
const path = require('path');
// 这个配置文件，起始就是一个js文件，通过 Node 中的模块操作，向外暴露了一个配置对象
module.exports = {
// 入口，表示，要使用 webpack 打包哪个文件
entry: path.join(__dirname, 'src/main.js'),
output: {
// 输出文件相关的配置
path: path.join(__dirname, 'dist'),// 指定打包好的文件，输出到哪个项目中
filename: 'bundle.js'// 这是指定输出文件的名称
}
};
当我们在 cmd 对应项目目录下，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
- 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
- webpack 就会去项目的根目录中，查找一个叫做 ‘webpack.config.js’ 的配置文件
- 当找到配置文件后，webpack 回去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
- 当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
直接输入webpack打包
改变后的文件效果：
注意：webpack，默认只能打包处理 js 类型的文件，无法处理其他非 js 类型的文件
如果要处理 非 js 类型的文件，参见：webpack 打包处理其他类型的文件
但是我们发现这样会很麻烦，每一次代码调试，都会重新打包，所以使用 webpack-dev-server 这个工具，来实现自动打包编译