WebPack基础入门(一):万物皆可webpack 拼搏现实的明天。 2022-12-18 11:56 142阅读 0赞 前言 前端技术日新月异的发生着变化,涌现出了很多的框架以UI为主的三大框架(react,vue,angular),与样式相关的less、sass。语法相关的es6 typescript以及npm上面成千上万的第三方工具包,各种可以提高开发效率的新思路和框架层出不穷,但是他们都有一个共同的特点不能够直接运行,必须转换后才能正确运行。WebPack 就是做这件事的,将源代码转换成可以执行的 JavaScript HTML CSS代码。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center] 关于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> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1] 打包文件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2] 打包后使用 可以看到我们在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项目。 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/fe2bb30892684e94bcb026fe35e02cf4.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/07a9902080434dbda9b06d9dee9a6ae5.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/9f66039714bd463e9d659eb0c52b5c3b.png
还没有评论,来说两句吧...