1,1前端工程化
就是按规范开发项目。
-
模块化
-
组件化
-
规范化
-
自动化
1,2webpack的基本使用
概念:前端工程化的解决方案,主要的功能是提供了友好的前端模块化开发支持。
1,2,1使用步骤
-
初始化一个packge.json文件
在一个空白的文件夹下用cmd使用 npm init -y 来初始化一个packge.json 初始化这个以后下载的包都会跑到这个文件里面。
-
创建一个src目录
-
在src目录下面创建index.html和index.js文件
-
初始化首页基本结构,就是把首页的的架子搭好
-
安装jquery,比如这个例子就是在colorchange这个文件夹下cmd 运行
npm install jquery -S 注意这里都是小写不然打包的时候会出错哦。
-
在项目中安装webpack 在终端运行如下命令,安装以下两个包
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
注意只在开发阶段使用的包后面使用-D 上线以后也要使用的 -S 至于具体后面跟什么,可以在npmjs这个网站上面查询。
-
index.js
import $ from 'jquery' $(function() { $('li:odd').css('background-color', 'red') $('li:even').css('background-color', 'pink') })
-
在项目中配置webpack
-
在项目的根目录下面创建webpack.config.js 的webpack配置文件,并初始化如下的基本配置:
//使用node.js中的导出语法,向外导出一个webpack的配置文件 module.exports = { //代表webpack运行的模式,可选值有两个development和production mode: 'development' }
-
在package.json的script节点下,新增dev脚本如下。
"scripts": { dev": "webpack" }
script节点下的脚本可以通过npm run运行。例如 npm run dev
-
在终端中运行npm run dev 命令启动webpack进行项目的打包构建。
npm run dev
-
然后对index.html进行如下操作
<!-- 使用npm run dev对webpack打包以后,会生成一个dist文件,下面这行代码就不需要了 --> <!-- <script src="./index.js"></script> --> <!-- 取而代之的是这行 --> <script src="../dist/main.js"></script>
-
1,2,2webpack中的默认约定
1,2,3自定义打包的入口与出口
在webpack.config.js 配置文件中,通过entry节点指定打包入口, 通过output节点指定打包出口。