目录

一.前端工程化

1.webpack

1定义是一个前端的构建工具。前端代码格式多html、css、js、图片前端构建工具的作用是将各种格式不同文件打包到一起方便项目的上线运行。将开发环境的代码转换成运行环境的代码

2主要功能

2.webpack的使用配置文件所需要的信息

1entry入口配置配置打包的入口文件即从项目的哪个文件开始打包

2output输出配置配置打包后的文件名称是什么存储路径是什么

3Loaders加载器webpack只能处理js、json等文件若要打包处理其他格式的文件css、less、sass、vue、图片时需要使用不同的loader插件辅助完成。若安装了不同的loader需要在webpack的配置中通过module.rules进行配置

4plugins插件扩展webpack的功能。如html插件

5mode打包的模式webpack有两种打包模式生产模式production和开发模式development。两种模式都只能编译ES6中的模式Module语法。

3.示例

1创建文件夹webpack-study

2进入文件夹打开cmd窗口

3将该文件夹初始化为npm项目npm init

4安装webpack开发依赖npm install webpack webpack-cli -D

5项目的目录结构

6写代码

7在项目的根目录下创建webpack的配置文件webpack.config.js

 8在package.json文件中配置打包指令

9运行打包指令npm run build进行打包

10将打包后的js文件导入页面文件index.html中

4.webpack中使用的loader

1url-loader用来打包图像文件

2'style-loader', 'css-loader', 'less-loader'用来打包样式文件

3babel-loader打包js文件

4vue-loader打包.vue文件

5.webpack中的plugins配置

二.使用webpack打包vue项目

1.使用vue-cil和webpack创建项目

1创建文件夹demo

2进入demo文件夹使用vue init webpack 项目名

2.在项目的根目录下创建webpack.config.js文件进行相关的打包配置

3.执行npm run build指令进行打包

三.在webstorm中安装vite插件通过vite构建工具创建vue项目

1.vite构建工具的核心配置文件vite.config.js

2.用vite创建vue项目时默认vue版本是3.0的

---

一.前端工程化

1.webpack

1定义是一个前端的构建工具。前端代码格式多html、css、js、图片前端构建工具的作用是将各种格式不同文件打包到一起方便项目的上线运行。将开发环境的代码转换成运行环境的代码

        开发环境的代码便于阅读

        运行环境的代码能够更快的执行通常会对代码进行压缩

2主要功能

        A.代码压缩将js代码、css代码、静态的资源文件图标、图像等进行混合压缩使代码的体积变小、加载速度更快

        B.统一编译语法css、less、sass、ES6语法、TypeScript语法等语法要求不同在不同浏览器上运行时会出现问题就需要使用构建工具进行统一编译

        C.模块化处理css、js都有自己的模块化处理方式对于这些模块化的语法在不同浏览器上的兼容性很差需要使用构建工具统一模块化的形式提高兼容性

2.webpack的使用配置文件所需要的信息

1entry入口配置配置打包的入口文件即从项目的哪个文件开始打包

2output输出配置配置打包后的文件名称是什么存储路径是什么

        path指明存储路径

        filename指定打包后的文件名

        clean打包前是否清空打包的输出目录

3Loaders加载器webpack只能处理js、json等文件若要打包处理其他格式的文件css、less、sass、vue、图片时需要使用不同的loader插件辅助完成。若安装了不同的loader需要在webpack的配置中通过module.rules进行配置

4plugins插件扩展webpack的功能。如html插件

5mode打包的模式webpack有两种打包模式生产模式production和开发模式development。两种模式都只能编译ES6中的模式Module语法。

3.示例

1创建文件夹webpack-study

2进入文件夹打开cmd窗口

3将该文件夹初始化为npm项目npm init

4安装webpack开发依赖npm install webpack webpack-cli -D

强调

        a.使用npm安装包时若没有指定版本号默认安装最新版本

        b.package.json文件中dependencies键的含义是发布后还依赖的devDependencies键的含义是开发时的依赖

        c.npm install --save将依赖包安装到dependencies键下npm install --save-dev将依赖包安装到devDependencies键下

        d.i是install 的缩写-D是--save-dev的缩写

5项目的目录结构

6写代码

7在项目的根目录下创建webpack的配置文件webpack.config.js

//webpack的基本打包配置有entry、output、mode三项即可

var path = require('path')

module.exports = {
    entry:'./src/main.js', //配置打包入口文件
    output:{ //输出配置
        path:path.join(__dirname,'dist'), //配置输出文件的保存位置
        filename:'js/bundle.js', //打包后的文件名
        clean:true //打包前是否将打包的输出目录清空
    },
    mode:'development' //以开发模式打包
}

 8在package.json文件中配置打包指令

"scripts": {
    "build":"webpack"
  }

9运行打包指令npm run build进行打包

10将打包后的js文件导入页面文件index.html中

4.webpack中使用的loader

1url-loader用来打包图像文件

2'style-loader', 'css-loader', 'less-loader'用来打包样式文件

3babel-loader打包js文件

4vue-loader打包.vue文件

5.webpack中的plugins配置

二.使用webpack打包vue项目

1.使用vue-cil和webpack创建项目

1创建文件夹demo

2进入demo文件夹使用vue init webpack 项目名

2.在项目的根目录下创建webpack.config.js文件进行相关的打包配置

3.执行npm run build指令进行打包

三.在webstorm中安装vite插件通过vite构建工具创建vue项目

1.vite构建工具的核心配置文件vite.config.js

 

2.用vite创建vue项目时默认vue版本是3.0的