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 -g
本地安装
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:UsersoyAppDataRoaming pm
- C:UsersoyAppDataRoaming pm目录添加到环境变量path
4、第一个demo:
项目结构：
源代码写在在src目录，编译文件在dist目录。
第一步：创建项目根目录webpack-study-1
第二步：创建项目目录结构
webpack-study-1 |dist |src |index.html |main.js
第三步：webpack全局安装，全局安装目录为C:UsersoyAppDataRoaming pm
npm install webpack@3.6.0 --global，把C:UsersoyAppDataRoaming pm目录添加到环境变量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 .srcmain.js .distundle.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 入口 出口