前端复习第一天（webpack 工程化简单使用）

最新推荐文章于 2023-05-27 23:45:00 发布

斯昂

最新推荐文章于 2023-05-27 23:45:00 发布

阅读量137

点赞数

分类专栏： vue 文章标签： webpack 前端

本文链接：https://blog.csdn.net/leon_940002463/article/details/129317516

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

标题前端复习第一天（webpack 工程化简单使用）

1、前端目前实行

模块化（js\css等依赖 element \layui）

组件化（页面封装组件）

规范化（代码规范、文件层级规范、命名规范、注释规范等）

自动化（自动编译、自动更新、自动部署、git）

2、前端工程化目前主流运用 webpack 工具来进行

初始化项目

npm init -y  // 生成一个pack.json 文件
在根目录 创建一个 src文件  src文件下 生成index.html 和index.js文件
安装iquery
npm install jquery --save (-S)  
安装到dependencies 这个文件是 开发 、发布都需要的依赖
-D 是安装到 devDependencies  这个是开发（生产）环境需要的依赖 上线后不再需要

安装 webpack

npm install webpack@5.42.1 webpack-cli@4.10.0 --save-dev (-D)

配置 webpack

现在项目根目录新建一个webpack.config.js 文件
在这个文件里面 默认导出一个 webpack 配置对象
// path  是node的一个模块  需要先引入 
const path = require('path')
// '这里要用 node.js 默认的导出方式'
module.exports = {
    // development 开发(编译速度快，不压缩混淆)  production 发布（压缩混淆，速度慢）
    mode:"development" ，
    // __dirname 是当前文件的绝对路径  这里的路径必须是绝对路径 所以用了__dirname

    entry: path.join(__diename,./src/index.js) // 定义需要打包编译的入口文件
    output: {
        path: path.join(__dirname.'./dist'),  // 输出的打包好的文件路径
        filename:"bundle.js"  // 输出的打包好的文件名称
    },
    devServer: {
        open: true, // 首次打包 后默认自动打开浏览器
        // 定义的项目端口号  默认8080
        port: 80, // 这里用的是数字类型， 在http协议中 如果端口号是 80可以默认省略
        // 定义的项目启动地址
        host: "127.0.0.1" // 默认localhost
	},
}

安装 webpack-dev-server 来实时打版编译

npm install webpack-dev-server@3.11.2 -D

pack.json 文件 配置编译命令 在webpack 后面追加一个serve 参数 再次执行即可
eg:
{
  "name": "change-rows-color",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve" //这里追加的 参数
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.3"
  },
  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.2"
  }
}

这个插件会在项目根目录 内存里面存打版后一个 index.js  不会在目录里面显示 但是实际存在 能在项目根目录下 增加上文件地址 直接打开查看

安装 html-webpack-plugin 插件来实现html的实时刷新

 npm install html-webpack-plugin@5.3.2 --save-dev
 
 配置
 
 // 1、导入 html-webpack-plugin这个插件，得到这个插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2、new 一个构造函数 创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制那个页面
    template: "./src/index.html",
    // 指定复制出来的文件名和路径
    filename:"./index.html"
})


最后在webpack 的配置对象上注册   
    plugins:[htmlPlugin] ,// 插件的数组，将来webpack在运行时 会加载并调用这些插件
    
    eg:
    const path = require('path')
// 1、导入 html-webpack-plugin这个插件，得到这个插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2、new 一个构造函数 创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制那个页面
    template: "./src/index.html",
    // 指定复制出来的文件名和路径
    filename:"./index.html"
})
// 使用node.js中的默认导出语法到处一个webpack 配置对象
module.exports = {
    mode: 'development', // development 开发  production 发布
    output: {
        path: path.join(__dirname, './dist'),
        filename:"bundle.js"
    },
    entry: path.join(__dirname, './src/index123.js'),
    plugins:[htmlPlugin] ,// 插件的数组，将来webpack在运行时 会加载并调用这些插件
    devServer: {
        open: true, // 首次打包 后默认自动打开浏览器
        port: 80, // 在http协议中 如果端口号是 80可以默认省略
        host:"127.0.0.1"
    }
}


插件原理 是在 项目根目录下生成一个虚拟的 index.html 。因为在浏览器中 文件下有index.html 当打开这个目录地址时  会默认展示这个 index.html 。 咱们项目规范化又要求 页面文件要放在 src 文件夹下  所以浏览器进入项目根目录看不到想要展示的项目根页面。 这里用html-webpack-plugin 这个插件来解决这个问题