WebPack基础入门(一)：万物皆可webpack

前言

前端技术日新月异的发生着变化，涌现出了很多的框架以UI为主的三大框架(react,vue,angular)，与样式相关的less、sass。语法相关的es6 typescript以及npm上面成千上万的第三方工具包，各种可以提高开发效率的新思路和框架层出不穷，但是他们都有一个共同的特点不能够直接运行，必须转换后才能正确运行。WebPack 就是做这件事的，将源代码转换成可以执行的 JavaScript HTML CSS代码。

关于WebPack的内容有很多，我只挑出我常用到的做一下笔记内容，主要有五节内容：
万物皆可webpack：使用webpack 打包常见的文件
React 项目: 打包React的配置
打包优化1
打包优化2: 打包优化分为两节内容，节省打包时间。
多文件打包：多个文件入口如何配置

四大核心

这是我自己总结的四大核心：

entry: 打包的入口文件

**output：**打包后输出文件
**module：**代码转换;如 less 转换为css，静态资源打包
**plugins：**补充modules的不足，webpack本身的大多数特性都使用这个插件接口。这使得webpack更加灵活。

当然了webpack 除了这些还有很多很多十分重要的内容，比如loader，mode，devTool，sourceMap等等，其他内容我们在面都能涉及到。
为什么说这四个是四大核心呢？因为使用这四个内容可以打包我们常见的各种类型文件，接下来我们就试一下吧：

创建项目

在创建项目之前，我们系统需要有node，npm；
再介绍一下npx，在安装npm的时候会自动安装npx，我们安装依赖在本项目中会生成一个node_modules文件夹，使用npx 调用的是本项目的依赖，而不是全局的依赖。

npm init 初始化项目

mkdir webpack-demo
cd webpack-demo
npm init -y
# -y 表示一切默认选择
npm install --save-dev webpack webpack-cli # 可以简写为 npm i -D webpack webpack-cli
# 安装webpack

会在文件夹下生成package.json

创建webpack.config.js 文件使用npx webpack
就会打包文件，打包配置默认为webpack.config.js，我们创建src 文件夹，所有的文件都在这里面。

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】每天更新最新技术文章干货。

开始配置

const path = require('path')module.exports = {entry:'./src/index.js',output: {filename: '[name].js',path: path.resolve(process.cwd(), 'dist'),},
}
# 会在项目里面生成 dist 文件夹，把src下面的index文件打包至dist文件夹下，
# entry: 可以写上面的字符串也可以写成对象如下
module.exports = {entry:{main:'./src/index.js'},output: {filename: '[name].js',path: path.resolve(process.cwd(), 'dist'),},
}
# output: [name]表示entry里面的key，这里就表示main，所以 src 下的index 会打包为main文件，如果entry是字符串默认为main

index.js

const element = document.createElement("div");
element.className = "custom";
element.innerText = "Hello World";const dom = document.getElementById("root");
dom.appendChild(element)# 都能看懂

打包

npx webpack

这里的index.html 是我自建创建的，创建完成后把main.js 引入到html中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div><script src="./main.js"></script>
</body>
</html>

打包文件

打包后使用

可以看到我们在js里面写的内容都生效了

使用loader

loader 主要是用来翻译代码的，把代码翻译成浏览器能够运行的源码

上面打包的是js文件所以不需要翻译，如果我们在项目里面用到了图片，less，sass，字体文件呢？

所以就用到了loader，以下loader都需要先安装哦

module.exports = {entry: './src/index.js',output: {filename: '[name].js',path: path.resolve(process.cwd(), 'dist'),},# 这里只举例less-loader，loader 的读取是从右到左的module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'] # css-loader 读取css文件翻译成样式，style-loader把样式生效},# less，先把less 文件读取为css 文件，在使用css-loader读取为样式，style-loader 把样式生效{test: /\.less$/i,use: ['style-loader',{loader: 'css-loader',options: {modules: true // style.className}},'less-loader',]}]}
}

使用plugins

以上的操作都是先把文件打包，然后创建一个html，把打包的文件引入到html文件中。十分的麻烦，所以可以使用plugins，在每次打包的时候都生成一个html文件，并把文件引入，不需要我们自己操作。

plugins：是一个数组

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
# 安装插件 npm i -D html-webpack-plugin
module.exports = {...plugins:[new HtmlWebpackPlugin({template: './index.html' // 使用当前目录的index.html为模板，每次打包把打包后的文件引入到模板文件里面，并打包到dist}),]
}

结语

这节简单的说了下webpack的打包配置，是webpack打包的就牛一毛，包括本节内容，我也没有说太多，主要是配置，更多内容还需要查看官方文档，这个只属于一个入门级别的。欢迎查看下节打包配置react项目。

WebPack基础入门(一)：万物皆可webpack相关推荐

webpack基础入门
我相信,有不少的朋友对webpack都有或多或少的了解.网上也有了各种各样的文章,文章内作者也写出了不少自己对于webpack这个工具的理解.在我刚刚接触webpack的时候,老实说,网上大部分的文章 ...
零基础学习之万物皆可GAN学习路线
1.python 那本蟒蛇书看前10章就够用了,学学语法会调包就行了,学术研究和开发不一样我其实不推荐看视频,太墨迹,没必要,直接看书或者看手册就行如果真的要看视频的话,这里有两个视频可以推荐一下 ...
JS入门篇-万物皆对象
万物即是对象,这是我看<悟透javascript>第一部分最强烈的印象.接下来我来理一下书中第一部分的脉络. 书中告诉我们,在编程的世界里就是数据和实现的逻辑,接下来讲了在JS中,万物皆是 ...
FPGA基础入门【1】Vivado官方免费版安装
本人自本科大二开始接触FPGA相关知识,现已将近五年,从这篇开始将从比较基础的角度讲述如何一步步了解FPGA.我相信动手一步步做下去是从零开始学习知识的最快方法,因此不会从最基础开始讲,而是在碰到相应 ...
Kotlin入门-万物皆对象，基础类型
Kotlin说:万物皆对象. 可以说,Kotlin全面的接管了所有类型.一统天下. 即是基础,那就需要,通盘了解.按目录来就行.也有Xmind版本 github地址本文将从下面几个方面去讲解数字 ...
webpack 3 零基础入门教程 #13 - 生产环境 vs 开发环境
接着上一节来,我们要解决上一节所遇到的一个问题. 上一节提到,要让生产环境使用 extract-text-webpack-plugin 这个插件,而开发环境不使用,如何做到呢? 其实原理很简单,只要能 ...
Webpack实战（一）：基础入门-教你轻松搞定Webpack打包工具安装及参数配置
为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...
Webpack从入门到进阶（二）---附沿路学习案例代码
文章目录 Webpack从入门到进阶(一)---附沿路学习案例代码一.Webpack简介 1.前端发展的几个阶段 2.前端三个框架的脚手架 3.Webpack是什么? 4.webpack和vite ...
webpack基础版及其常用插件分享超详细~~
webpack的作用打包.把多个文件打成个数更小的文件. 支持模块化优化: 代码压缩,加密掌握webpack的基本使用: 配置webpack.config.js 基本使用入口出口 loade ...

WebPack基础入门(一)：万物皆可webpack

WebPack基础入门(一)：万物皆可webpack相关推荐

最新文章

热门文章