webpack工程化前端开发

Vue基础-00课程介绍_哔哩哔哩_bilibili

源码,https://gitee.com/cao_mingquan/webpack.git

前端开发

实际的前端开发

1、模块化(js代码的复用)

2、组件化(html css的复用)

3、规范化(目录结构有层次,代码编写风格保持一致等等)

4、自动化(例如自动刷新等)

目前主流的前端工程化解决方案

webpack(以这个为主)

parce(第三方包用,用得少)

webpack是前端项目工程化的具体解决方案,可以让开发者专心开发功能,提高开发效率,提高项目可维护性。

webpack作用

1、提供了友好的前端模块化开发支持

2、代码压缩混淆(去除注释,空格,换行,运行更快)

3、处理浏览器端js的兼容性,例如ie8不支持es6语法,可以用webpack向下配置,将es6语法自动转换成低级js语言

第一个webpack示例

webpack工程化前端开发_第1张图片

 index.js里面写jQuery代码

注意:

1、src目录中放程序员的代码

2、npm i jquery -s 是npm install jquery --save的简写

-s参数会将包名写进dependencies(开发中和上线后,都需要的包,例如jquery)

-d参数(--save-dev)会将包名写进devDependencies(只在开发中用的包,上线后不需要,例如webpack)

3、ES6导入jQuery,import $ from "jquery

import语法在浏览器中有兼容性问题,使用webpack解决,如下

1、在项目中安装webpack相关的两个包

 npm install [email protected] [email protected] -D

2、安装好后,还需要配置

在项目根目录中,创建名为webpack.config.js,初始化如下配置

module.exports = {
    mode:"development"  //mode 用来指定构建模式,可选值有development 和 production
}

development模式在开发阶段用,打包速度快,生成文件体积大

production模式在上线时用,打包速度慢,生成文件体积小

在package.json的scripts节点下,新增dev脚本,如下

  "scripts": {
    "dev": "webpack"//可以通过npm run 执行,例如npm run dev
  },

3、在终端运行npm run dev启动webpack打包构建项目

npm run dev会首先找到webpack.config.js,然后再接着运行webpack

出现一个问题:

在node V18.12.1版本上运行npm run dev报错

Error: error:0308010C:digital envelope routines::unsupported,解决方法如下:

  "scripts": {
    "dev": "set NODE_O

你可能感兴趣的:(vue.js,前端,javascript)