webpack初体验(1)

coderYarn
652 阅读3分钟

众所周知webpack是一个作为新生代前端开发人，不可忽视的开发工具。

webpack能做些什么?

    **Webpack**是一个前端构建工具，可以将所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。

image.png

一般来说我们接触到webpack的时候都是在vue-cli或者create-react-app中,接触到繁多的打包配置,这对于当时的我们来说:一般都会有这样的疑问,框架都帮我们做好了,我们为什么还要去学这个东西呢?但是当我们积累了一定经验,熟悉了一定流程。我们就会知道webpack如此的重要,小到配置路径,大到打包优化这一切都是离不开webpack的,接下来让我带大家一起走进webpack的世界！！！

webpack官网

[webpack](webpack 中文文档 | webpack 中文网 (webpackjs.com))webpack是有中文文档的我们一般学习首先肯定是会看看文档的,但期中不乏有一些小伙伴看文档跟看天书一样(这就是在下) 在文档中我们可以看到有概念/配置/api等等,我们初学主要接触的也是这些东西.

准备工作

  • 首先让我们先来创建一个文件夹
  • 进入该文件夹
  • 首先让我们先初始化出来一个package.json
mkdir webpack-demo
cd webpack-demo
npm init -y

这是时候我们就获取了一个这样的文件夹了

image.png

这个package.json是帮助我们用来一般记录了项目的配置信息，包括名称、版本、许可证等元数据，
也会记录所需的各种模块，包括 执行依赖，和开发依赖，版本等信息。

接下来我们还需要做一下工作

  • 在文件根目录创建一个index.html文件
  • 创建一个src文件夹
  • 在src文件夹中创建一个index.js文件 做好了这些我们就要下载webpack 的依赖了npm i webpack webpack-cli -D在我们的项目中局部使用webpack
    做好了这些我们就可以继续工作了
  • 我们要清楚webpack最早的时候是帮我们处理模块化打包的问题的。因为我们的浏览不能识别 CommonJS和ES Module 规范的。也就是说当我们这是时候在文件中使用这个编写一下内容直接引入到index.html文件中是浏览器是会报错
//CommonJS
const dateFormate=(date)=>{
  return '1232-23-23'
}
const priceFormate=(date)=>{
  return '1232-23-23'
}
module.exports={
  dateFormate,priceFormate
}

//ES Module
export const sum = (num1,num2)=>{
  return num1+num2
}

export const mul = (num1,num2)=>{
  return num1*num2
}
//index.js
import { sum,mul } from './js/math.js';
const {priceFormate,dateFormate} = require('./js/formate')
console.log(sum(2,2));
console.log(mul(2,2));
console.log(priceFormate(2));
console.log(dateFormate(2));
//index.html 
  <script src="./src/index.js"></script>

298415b7fac1bef3cf26aa8b126de22.png

  • 这时候我们就需要借助webpack来帮助我们做这些事情了

首先我们在package.json 可以看到 webpack 和 webpack-cli
然后我们也可以看到package.json中有一个叫scripts的对象,顾名思义这个对象是用运行我们的脚本的
我们在里面加上我们的这句话"build": "webpack"这样子 我们就可以使用webpack来为我们进行打包了
这个时候我们可以使用 npm run build来执行我们的 webpack让它为我们进行打包

UB{OJ)$(YOUMZ_OYZ{BNU.png 打包完成之后我们就会发现我们的根目录下,多了一个叫dist的文件夹了

EN60S2P)[Q1PK~VN$7]3V.png

  • 这个时候我们去index.html把之前的 <script src="./src/index.js"></script>换成 <script src="./dist/main.js"></script>然后运行我们就会发现,之前报错的内容现在已经编译了

0OV{D0_FW{G$E}XESW59S.png

这就证明了,我们这次打包是成功的！

注意点

我们什么都没做,webpack是怎么知道我们要打包的文件是什么呢?

  • 因为当我们的项目中有src文件夹,src文件夹中有index.js文件,wepback会默认帮助我们找到这个文件并且在我们的根目录中生成dist文件夹和main.js这个已经打包编译好的文件。
  • 但是用过其他框架的小伙伴们很快就反应过来了我们使用框架打包的时候,很多时候打包出来的有可能是叫其它名字的,这是如何做到的呢？接下来让我继续为大家来解惑.

webpack.config.js

webpack.config.js是用于我们编写webpack详细配置的文件,只要我们写在根目录中,我们运行npm run build的时候,webpack编译就会默认来查询我们的根目录中有没有这个文件,有的话就会运行它里面的配置
接下来让我们把src文件夹中的index.js改成mian.js
然后我们在根目录中创建一个名为webpack.config.js的js文件

  • 我们要知道webpack文件运行的时候是要经过nodejs的,索引在这个文件中我们要使用CommonJS的编写规范,把这个文件中的内容导出去.

出口\入口

  • 出口和入口是webpack很重要的核心
  • 出口就是我们打包编译后文件要放在哪叫什么，在webpack中叫output
  • 入口就是我们刚刚说到的src下的index.js文件，webpack要找到这个文件夹,然后开始编译文件，在webpack中叫entry 所以这个时候我们需要在webpack.config.js中写上一些内容然后让它运行起来，让哦我们看看结果.
  • path是nodejs内置的一个拼接路径的插件
  • 这里我们可以看到入口entry就是我所有文件的入口
  • output是我打包之后要放的路径,里面有filename就是文件名,和path打包之后要存放的位置
  • 接下来让我们运行一下把
const path = require('path');
module.exports={
  entry:'./src/main.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'./dist')//这里必须是一个绝对路径
  }
}

%YB)K9]JR_)BD_)P{9%9A.png 可以看到打包是没有问题的,当然这个时候我们的入口文件什么的是可以随便改的,只要之后改变配置中的文件就可以了.

结尾

本章中提到的内容都是可以在webpack中看到如图,希望各位初学webpack的小伙伴学会从官方文档中学会知识,毕竟很多大佬都是看文档的嘛。
同时本人是个大三学生,可能说的东西毕竟笼统,如果大佬看到了轻喷！！！！
下章见！！！

V8DQZ%TS(ZSO$6EG7UYAI7Y.png

avatar
文章
阅读
粉丝