-
什么是webpack?
依照官网上的话就是，本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
简单理解：webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具。
-
为什么要使用webpack?
1.模块化开发，简单明了（import export）
2.预处理器（Less,Sass...）
3.目前很多前端框架都支持（react,vue...）
注意：在开始之前，必须确保安装node的最新版本。
一、webpack安装：
1.全局安装：
npm install --gobal webpack
//不建议使用全局安装，会使你使用webpack的所有项目都为规定的版本，不易使用
2.本地安装
要安装最新版本或者指定版本，请执行以下命令：
此处说明：--save-dev为将模块安装到本地项目中，并将模块依赖写入package文件中devDependencies 节点
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用的是webpack4+的版本，你还需要安装cli
npm install --save-dev webpack-cli
二、webpack使用：
1.创建一个项目目录并切换到此目录路径下：
mkdir webpack-demo
cd webpack-demo
2.初始化项目(目的：npm管理项目中的依赖包)：
npm init -y
//-y表示 初始化项目时条件依赖默认选择yes
3.本地安装webpack，同时安装webpack-cli工具：
npm install --save-dev webpack webpack-cli
4.创建项目目录的基本结构：
①创建两个文件夹：
---src:源码目录
---dist:项目发布目录
②在src文件夹中创建index.js文件，此文件为项目工程的入口文件。
③在dist文件夹中创建index.html文件：首页。
④编写代码：
src/index.js
function component() {
var element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
dist/index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
5.以下操作完成后，运行index.html会没有任何效果，这时会有一个问题：
微信图片_20190508171037.png
6.使用webpack管理项目
①安装loadsh
npm install --save loadsh
②修改代码：在index.js导入loadsh
import _ from 'loadsh';
③使用webpack打包项目：
npx webpack
7.修改index.html中的引用，是一个基于使用打包好的main.js，是一个基于然后运行程序
<script src="main.js"></script>
扩展：
在 webpack 4 中，可以无须任何配置使用，默认会将入口的index.js文件打包成main.js，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 [配置文件]，这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件：
①创建并编辑配置文件
项目目录下创建 webpack-config.js文件，编写配置：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
②执行打包命令：
npx webpack --config webpack.config.js
以上内容，可以完成小小的webpack 打包管理项目。喜欢可以点个赞哦！^ _ ^
网友评论