前端工程化webpack

最新推荐文章于 2024-03-14 20:18:11 发布
最新推荐文章于 2024-03-14 20:18:11 发布
阅读量337 收藏
点赞数
文章标签： 前端 webpack node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45129167/article/details/122124366
版权
这篇博客介绍了ES6的模块化规范，通过Node.js使用Babel体验模块化，并展示了如何配置Babel进行代码转换。接着讲解了Webpack的基本使用，包括打包处理CSS、JS、图片等资源，以及配置自动打包和预览页面。最后提到了Vue单文件组件的用法和Webpack在实际项目中的应用，包括Vue组件的打包和Webpack的生产环境配置。
摘要由CSDN通过智能技术生成

模块化概述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

大一统的模块化规范 – ES6模块化

Node.js 中通过 babel 体验 ES6 模块化
在这里插入图片描述
打开CTRL+`打开终端

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

npm install --save @babel/polyfill

创建项目跟目录创建文件 babel.config.js

const presets = [
  [
    '@babel/env',
    {
      targets: {
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1'
      }
    }
  ]
]

module.exports = { presets }

通过 npx babel-node index.js 执行代码

npx babel-node .\index.js

默认导出 与 默认导入
在这里插入图片描述

let a = 10
let c = 20
let d = 30

function show() {
  console.log('1111111111111')
}

export default {
  a,
  c,
  show
}




import m1 from './m1.js'
console.log(m1)

在这里插入图片描述
在这里插入图片描述

let a = 10
let c = 20
let d = 30

function show() {
    console.log('1111111111111')
}

export default {
    a,
    c,
    show
}

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {
    console.log('ooooooooo')
}

// export default {
//   d
// }

import m1, { s1, s2 as ss2, say } from './m1.js'

console.log(m1)
console.log(s1)
console.log(ss2)
console.log(say)

在这里插入图片描述

直接导入并执行模块代码
在这里插入图片描述

for (let i = 0; i < 3; i++) {
  console.log(i)
}


import './m2.js'

在这里插入图片描述
当前 Web 开发面临的困境
在这里插入图片描述

webpack 概述

在这里插入图片描述

webpack 的基本使用

创建列表隔行变色项目
在这里插入图片描述

npm init -y

npm install jquery –S


import $ from 'jquery'
$(function() {
  $('li:odd').css('backgroundColor', 'blue')
  $('li:even').css('backgroundColor', 'lightblue')
})

<script src="./index.js"></script> 
</head>
  <body>
    <input type="text" placeholder="ceshi" />
    <ul>
      <li>这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
      <li>这是第7个li</li>
      <li>这是第8个li</li>
      <li>这是第9个li</li>
    </ul>

在项目中安装和配置 webpack
在这里插入图片描述

npm install webpack webpack-cli –D

module.exports = {
  // 编译模式
  mode: 'development', // development  production

"dev": "webpack

 npm run dev

在这里插入图片描述

module.exports = {
    mode: 'production' // mode 用来指定构建模式
}

在这里插入图片描述
main.js的大小大大变小，所以应该在上线前改为production
配置打包的入口与出口
在这里插入图片描述

const path = require('path')
module.exports = {
    mode: 'production', // mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称
    }
}

  <script src="/bundle.js"></script>

生成新的bundle.js文件
配置 webpack 的自动打包功能
在这里插入图片描述

npm install webpack-dev-server –D

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
    },

 <script src="/bundle.js"></script>

npm run dev

在这里插入图片描述
在这里插入图片描述

配置 html-webpack-plugin 生成预览页面

在这里插入图片描述

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlguin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
})
module.exports = {
    mode: 'production', // mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称
    },
    plugins: [htmlPlguin]
}

在访问8080端口时可以直接看到预设置的页面
在这里插入图片描述
配置自动打包相关的参数
在这里插入图片描述
可以自动弹出，并改变浏览器的ip和端口
在这里插入图片描述

webpack 中的加载器

通过 loader 打包非 js 模块
在这里插入图片描述
在这里插入图片描述
webpack 中加载器的基本使用
在这里插入图片描述

webpack 中加载器的基本使用

打包处理 css 文件
在这里插入图片描述
在这里插入图片描述

npm i style-loader css-loader -D

 module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
}

li {
    list-style: none;
}

import './css/1.css'

在这里插入图片描述
打包处理 less 文件
在这里插入图片描述

npm i less-loader less -D

  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

body {
  margin: 0;
  padding: 0;
  ul {
    padding: 0;
    margin: 0;
  }
}

import './css/1.less'

在这里插入图片描述
打包处理 scss 文件
在这里插入图片描述

webpack 中加载器的基本使用

配置 postCSS 自动添加 css 的兼容前缀

在这里插入图片描述

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [autoprefixer]
}


 <input type="text" placeholder="ceshi" />

 { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },

一种解决兼容的方式
在这里插入图片描述
打包样式表中的图片和字体文件
在这里插入图片描述

npm i url-loader file-loader -D

 { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, type: 'asset' }

#box {
  width: 580px;
  height: 340px;
  background-color: pink;
  background: url('../images/1.jpg');
}

由于我使用的 Webpack 的版本是 “webpack”: “^5.57.1” ，已经是 5.0 版本及以上了，而采用之前 5.0 版本以下的方法是行不通的；将use改为type设置才能使图片显示出来
在这里插入图片描述

打包处理 js 文件中的高级语法

在这里插入图片描述

class Person {
    static info = 'aaa'
}

console.log(Person.info)


npm i babel-loader @babel/core @babel/runtime -D


npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}


 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

在这里插入图片描述
事实上没有配置前也成功加载了。待研究

Vue 单文件组件

传统组件的问题和解决方案
在这里插入图片描述
Vue 单文件组件的基本用法
在这里插入图片描述
在这里插入图片描述

<template>
  <div>
    <h1>这是 App 根组件</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

在这里插入图片描述

npm i vue-loader vue-template-compiler -D

import App from './components/App.vue'

const VueLoaderPlugin = require('vue-loader/lib/plugin')

{ test: /\.vue$/, use: 'vue-loader' }

在 webpack 项目中使用 vue
在这里插入图片描述

npm i vue –S

import Vue from 'vue'

const vm = new Vue({
    el: '#app',
    render: h => h(App)
})

 <div id="app"></div>

在这里插入图片描述

webpack 打包发布

在这里插入图片描述

"build": "webpack -p",

将dist目录删掉，会生成新的dist目录
打开可以看到正常显示

在这里插入图片描述
完成

旺旺妙脆角
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端工程化 webpack
qq_43420617的博客
03-26 1476
webpack webpack 是前端项目工程化的具体解决方案 主要功能：他提供了友好的前端模块化的支持，代码压缩，处理浏览器兼容性，性能优化等功能 npm init -y npm install jquery -S 安装webpack npm install webpack webpack-cli -D -S --save -D --save-dev 通过npmjs.com查看安装时选择-S还是-D index.js 配置基础语句 以隔行变色为例 // es6导入语法 impo
黑马webpack总结
qq_44287165的博客
09-13 459
webpack的基本使用 1，什么是webpack？ 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的 2，在项目中安装webpack 在终端运行如下的命令，安装 webpack 相
Webpack 命令行参数详解
大V的博客
08-20 8567
很多小伙伴在每次用到package.json中的npm scripts时，总是被里面的各种命令行参数搞得头大。本文将针对webpack，对其命令行参数进行详解，希望读者们能借此搞清楚每个参数的作用，并在使用时能知道其含义。 "scripts": { "build": "./node_modules/.bin/webpack --bail --progress --profile --m...
webpack4系列笔记之（8）development 和production模式区分打包
qq_42744920的博客
06-12 994
development 和production模式区分打包
npm发布属于自己的包，以及发包过程中webpack打包遇到的一些问题以及解决方法，以后遇到相同的问题就可以直接来翻咯
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
06-26 1938
由于工作中常用到了很多常用的方法。于是前段时间自己就整理了一些常用的方法，发布了npm，以便于之后用得到的时候可以直接通过npm安装直接import使用。
02_Webpack基础（生产模式）
zyq的博客
05-03 166
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度。
webpack学习笔记（一）：先打它一个包！webpack --mode [production | development | none]
CowShield的博客
07-17 2411
参考教程：https://www.webpackjs.com 1.创建目录，初始化npm，安装webpack。   mkdir webpack-demo &amp;&amp; cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev *webpack 4以上版本要求安装webpack-cli 2.创建一...
【WebPack】前端工程化
懂得一千零一种,赋予你失败的方法！
06-18 1605
概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。注意：目前企业级的前端项目开发中，绝大多数的项目都是基于 webpack 进行打包构建的。在配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。
前端工程化与webpack
QSY_com的博客
02-15 155
概念：webpack是前端工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。// 在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。
【前端工程化】Webpack介绍
最新发布
cherry__yu的博客
03-14 1154
当然前端工程化包含的东西太多，思维导图里只是一部分我用过的选型。那从Webpack开始，如果有机会别的工具小鱼也会一点点的讲到。
（一）前端工程化与webpack
释怀°Believe的博客
04-24 332
文章目录一、前端工程化二、webpack的基本使用 一、前端工程化 模块化(js的模块化、css的模块化、资源的模块化） 组件化（复用现有的UI结构、样式、行为） 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理） 自动化（自动化构建、自动部署、自动化测试） 2.什么是前端工程化 前端工程化指的是：在企业级的前端开发项目中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。 3.前端工程化的解决方案 webpack parcel 二、webpack的基本使用 1.什么
Webpack实现前端工程化
柯晓楠
02-26 1162
基础：Webpack实现前端工程化 引言 在很久之前，模块化管理还没有出现，如果我们开发一个页面想要引入一些依赖的话，最常见的做法就是将依赖文件引入到.html文件中。比如，我们要使用JS的一些依赖库，就要在.html文件中使用<script>标签引用；要引用CSS的依赖就要使用<link>标签。如果页面中引入的依赖文件太多，那么向服务发送的请求也随之增多，势必会拖慢网页的...
webpack前端工程化
buyue
02-18 893
工程化包含4个现代化 1.模块化(js的模块化，css的模块化，其他资源的模块化) 2.组件化(可复用的UI结构、样式、行为) 3.规范化(目录结构划分合理，编码规范化，接口规范化，文档规范化，版本控制规范化) 4.自动化(自动化构建，自动化部署，自动化测试) 目前主流前端工程化解决方案： webpack js模块化历程 设置使用国内镜像 npm config set registry https://registry.npm.taobao.org 本文所使用的环境版本 "webpack": "^
前端工程化 | Webpack
baibaibaiqi的博客
01-15 391
webpack是一个模块打包工具，他依赖于nodejs环境。 与其他打包工具（grunt/gulp 前端流程的自动化）对比，webpack更强调模块化（AMD,CMD,CommonJ,ES6）开发管理。 功能：自动处理js之间相关的依赖、ES6 转ES5 scss、less转成css .vue文件转成js文件 打包后的文件放在dist文件夹下，将所有依赖打包成一个bundle.js package.json 版本信息 中的script定义执行脚本 script:{..
前端工程化和webpack
gong3244966的博客
04-12 232
什么是前端工程化 将前端的开发流程规范，标准。 用于提升开发效率和代码质量 简单的单页面应用 可以使用gulp+同步工具实现开发权流程 从复杂角度考虑 jenkenis git/gitlab 版本控制 webpack 前端项目构建工具 React/vue/Angular 工程化的工具 Webpack grunt gulp parcel rollup.js 印记中国 设置好入口和输出，...
前端工程化与WebPack
weixin_42823014的博客
04-11 661
前端工程化 前端开发： 模块化：js的模块化、css的模块化、其他资源的模块化 组件化：复用现有UI结构、样式、行为 规范化：目录结构划分、编码规范化、接口规范化、文档规范化、Git分支管理 自动化：自动化构建、自动部署、自动化测试 前端工程化： 在企业级项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终实现前端的四个现代化 优势： 让前端开发能够“自成体系”，覆盖前端项目从创建到部署的方方面面 最大程度提升了开发效率。降低了技术选型、前后端联调等带来的协调沟通成本
说说前端工程化利器 webpack
weixin_33686714的博客
02-24 140
1 工程化 前端自动化或者半自动化工程，需要实现以下功能： 合并和压缩 Javascript、CSS 代码 。 CSS 预处理： Less ， Sass, Stylus 的编译。 生成雪碧图（CSS Sprite）。 ES6 转换为 ES5 语法。 模块化。 名称解析： Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值