Day04-Webpack打包js、css文件,前端开发报告

37 阅读5分钟

最后

中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。

  • 技术要深入到什么程度?

  • 做久了技术总要转型管理?

  • 我能做什么,我想做什么?

  • 一技之长,就是深耕你的专业技能,你的专业技术。(重点)

  • 独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)

  • 拥有事业,选择一份使命,带领团队实现它。(创业)

一技之长分五个层次

  • 栈内技术 - 是指你的前端专业领域技术

  • 栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识

  • 工程经验 - 是建设专业技术体系的“解决方案”

  • 带人做事 - 是对团队协作能力的要求

  • 业界发声 - 工作经验总结对外分享,与他人交流

永远不要放弃一技之长,它值得你长期信仰持有

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。

开源分享:docs.qq.com/doc/DSmRnRG…

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

在这里插入图片描述

二、Webpack安装

==========================================================================

1、全局安装Webpack


npm install -g webpack webpack-cli

在这里插入图片描述

2、查看Webpack版本号


webpack -v

在这里插入图片描述

三、初始化项目—Webpack打包js文件

====================================================================================

在这里插入图片描述

1、首先在vscode工作空间中创建文件夹Webpackdemo


在这里插入图片描述

2、初始化项目环境,点击Webpackdemo文件夹,在终端中打开。


npm init -y

在这里插入图片描述

3、创建src文件夹


在这里插入图片描述

4、src下创建common.js


exports.info = function (str){

document.write(str)

}

5、src下创建utils.js


exports.add = function(a,b){

return a+b;

}

6、src下创建main.js


const common = require('./common')

const utils = require('./utils')

common.info('hello world!'+utils.add(1,2));

四、JS打包

=====================================================================

1、webpackdemo目录下创建配置文件webpack.config.js


以下配置的意思是:读取当前项目目录下src文件夹中的main.js(入口文件)内容,分析资源依赖,把相关的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块

module.exports = {

entry: './src/main.js', //配置入口文件

output: {

path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径

filename: 'bundle.js' //输出文件

}

}

2、打包


打包方式一:命令行执行编译命令

webpack #有黄色警告

webpack --mode=development #没有警告

#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

在这里插入图片描述运行成功后生成bundle.js文件

在这里插入图片描述

打包方式二:

打包js文件也可以配置项目的npm运行命令,修改package.json文件

"scripts": {

//...,

"dev": "webpack --mode=development"

}

运行npm命令执行打包

npm run dev

3、webpackdemo目录下创建index.html


引用bundle.js

4、浏览器中查看index.html


在这里插入图片描述

五、CSS打包

======================================================================

1、安装style-loader和 css-loader


Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js


const path = require("path"); //Node.js内置模块

最后

如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】