互联网经过这么多年的发展,页面由一开始的红黄蓝绿到现在的多元化,页面变得越来越复杂,自然而然的产生了诸多问题,比如说前端代码的模块化和工程化,应运而生的React,Vue库使得大型的网页开发不在局限于jquery的DOM操作,让前端开发有了更多的体验
一,什么是WebPack
首先要了解什么是模块化:模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性。前端的模块化一般都是Nodejs里面的NPM包。本质上webpack是一个现代的js应用程序的静态打包器。
不使用:浏览器解析浪费时间过多,不安全源代码能被别人看到,服务器请求压力大
使用:方便我们把完成的代码里面的注释,空格,换行进行压缩,减少传输时间,最后关键的是可以给我们的代码进行加密。
二,安装WebPack
以webstorm为例需要先安装 WebPack.
npm install webpack -d npm install webpack-cli -d -d:表示该模块在生产环境下不使用,只在开发环境下使用
开发环境:当项目处于开发阶段, 项目运行在开发人员的电脑上, 项目所处的环境就是开发环境
生产环境:当项目开发完成以后, 要将项目放到真实的网站服务器电脑中运行, 项目所处的环境就是生产环境。
三,使用打包工具
1压缩js文件 dsg.js s.js hgh.js
首先创建入口文件 main.js
//引入js文件 import'./dsg'; import'./s'; import'./hgh'
然后配置文件,在里面需要配置入口文件地址,输出文件地址和输出文件名字(放在根目录下)【webpack.config.js】
let path = require("path"); // 配置内容 module.exports = { // 入口文件 entry:"./src/main.js", // 输出文件【名称、地址】 output:{ // 地址 path:path.join(__dirname,"src"), // 名称 filename:"demo.min.js" } }
运行只需要在控制台输入 webpack
2打包css文件 a.css b.css
需要先下载第三方模块loader来打包css文件
let path = require("path"); // 配置内容 module.exports =
css的入口文件
import './c.css' import './d.css'
配置文件
let path = require("path"); module.exports = { entry:{ css:"./src/mainCss.js" }, output:{ path:path.join(__dirname,"src"), filename:"[name].min.js" }, module:{ rules:[ { test:/.css$/, use:["style-loader","css-loader"] } ] } }
3 js文件和css文件一起打包
入口文件
// 引入js文件 import './dsg'; import './s'; import './hgh'; // 引入css文件 import './a.css' import './b.css'
配置文件
let path = require("path"); module.exports = { entry:"./src/mainCss.js", output:{ path:path.join(__dirname,"src"), filename:"css.min.js" }, module:{ rules:[ { test:/.css$/, use:["style-loader","css-loader"] } ] } }