1、webpack概念
webpack是前端的一个项目构建工具,它是基于node.js开发出来的一个前端工具;借助webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
webpack官网:https://webpack.js.org
github地址:http://webpack.github.io
中文文档: https://www.webpackjs.com/
2、webpack安装
全局安装
npm install webpack --global 全局安装
npm install --save-dev webpack-cli -global
本地安装
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本,你还需要安装cli: npm install --save-dev webpack-cli
3、webpack最基本的使用方式
webpack的作用:
1)webpack能够处理js文件的相互依赖关系
2)webpack能够处理js的兼容问题,把高级的、浏览器不识别的语法,转为低级的、浏览器能识别的语法
语法:webpack 要打包的文件的路径 打包好的输出文件的路径
- 要使用webpack命令,需要全局安装
- 全局安装目录为C:\Users\oy\AppData\Roaming\npm
- C:\Users\oy\AppData\Roaming\npm目录添加到环境变量path
4、第一个demo:
项目结构:
源代码写在在src目录,编译文件在dist目录。
第一步:创建项目根目录webpack-study-1
第二步:创建项目目录结构
webpack-study-1 |dist |src |index.html |main.js
第三步:webpack全局安装,全局安装目录为C:\Users\oy\AppData\Roaming\npm
npm install [email protected] --global
把C:\Users\oy\AppData\Roaming\npm目录添加到环境变量path
第四步:本地安装jquery: npm install jquery --save(或npm i jquery -S)
第五步:
index.html
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <script type="text/javascript" src="../dist/bundle.js"></script> </head> <body> <ul> <li>这是一个li标签</li> <li>这是一个li标签</li> <li>这是一个li标签</li> <li>这是一个li标签</li> <li>这是一个li标签</li> </ul> </body> </html>
main.js
// 这是项目的入口js文件
// 导入jquery
//这是ES6中导入模块的语法
import $ from 'jquery';
// const $ = require('jquery');
$(function() {
$('li:odd').css('backgroundColor','blue');
$('li:even').css('backgroundColor','#eee');
});
第六步:在项目根目录,执行命令 webpack .\src\main.js .\dist\bundle.js
第七步:index.html引用bundle.js
<script type="text/javascript" src="../dist/bundle.js"></script>
第八步:访问index.html页面
5、配置文件webpack.config.js的使用
在项目根目录新建 webpack.config.js
var path = require('path'); // 通过node的模块操作,向外暴露一个配置对象 module.exports = { entry: path.join(__dirname, './src/main.js'), // 入口,表示要使用webpack打包哪个文件 output: { // 出口 path: path.join(__dirname, './dist'), filename: 'bundle.js' } };
在控制台直接输入命令webpack,会调用配置文件webpack.config.js,导入入口和出口,使得 webpack命令 ==> webpack 入口 出口