版权声明:未经同意,不得随意转载转载 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 这个工具,来实现自动打包编译