工程化-webpack简单使用

最新推荐文章于 2024-08-22 08:57:11 发布
最新推荐文章于 2024-08-22 08:57:11 发布
阅读量269 收藏
点赞数
分类专栏： 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43756060/article/details/105829257
版权

核心概念

入口
module.exports = {
	entry: './path/to/my/entry/file.js'
};
输出
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
}
Loader
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.txt$/, use: 'raw-loader'}
    ]
  }
}
插件
const HtmlWebpackPlugin = require('html-webpack-plugin') // 通过npm安装
const webpack = require('webpack') //用于访问内置插件

module.exports = {
  module: {
    rules: [
      {test: /\.txt$/, use: 'raw-loader'}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}
模式/兼容性

webpack支持所有符合es5标准的浏览器，webpack的import()和require.ensure()需要Promise,如果你想支持旧版本浏览器，在使用这些表达式之前，还需要提前加载polyfill

npm install --save babel-polyfill

然后，使用import将其引入到我们的住bundle文件
src/index.js

import 'babel-polyfill';

搭建webpack

  1. 查看本地node和npm版本
  • node版本号10.16.0
  • npm版本号6.9.0
  • nvm安装指定版本的node
nvm install v10.16.0
nvm use 10.16.0
  1. 创建空文件夹并初始化项目,快速创建nodejs项目，生成package.json
npm init -y
  1. 安装webpack及依赖包webpack-cli
npm install webpack webpack-cli -D
  1. 配置package.json使用webpack
    这样就可以在命令行中使用npm run build执行webpack了
    （执行的时候会有报错请忽略，因为文件中只有package.json，还没有其他文件）
"scripts": {
   "build": "webpack"
 },

webpack配置

配置入口
  1. 创建webpack.config.js
const config = {
  entry: './src/index.js'
}

module.exports = config
  1. 创建src目录，并在里面创建index.js入口文件
  2. 执行npm run build构建index.js文件，默认构建到dist/main.js文件
配置输出
const path = require('path')

// 当前文件的绝对路径
// console.log(path.resolve())
// 当前文件的绝对路径拼接指定的路径
// console.log(path.join(__dirname, './dist'))
// filename: 打包后的文件名字
// path: 需要使用绝对路径

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './dist')
  }
}

module.exports = config
loader的配置和使用
  1. 安装相关的loader依赖
    如css-loader、style-loader

npm install css-loader style-loader -D

  1. webpack.config.js中添加module
    注意use数组中的loader的顺序，它是倒叙执行的，先执行css-loader在执行style-loader,
    注意他俩的顺序不能颠倒，否则会报错
const path = require('path')

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
  }
}
module.exports = config
  1. 在src目录下创建index.css文件
body,html{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: red;
}
  1. 在src下的index.js中引用
require('./index.css')
  1. 删除dist文件夹，执行npm run build重新构建
  2. 在dist文件夹中创建index.html，并引入bundle.js,验证是否将css文件构建成功
    在浏览器中打开index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  hello word
  <script src="bundle.js"></script>
</body>
</html>
  1. 配置sass-loader
  • 安装sass-loader

npm install sass-loader node-sass -D

  • 重新配置module
module: {
    rules: [
      {test: /\.(scss|css)$/, use: ['style-loader', 'css-loader', 'sass-loader']}
    ]
  }
  • 删除index.css创建inex.scss
body,html{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: green;
}
  • 在index.js中引入index.scss
require('./index.scss')
  • 删除dist文件夹，重新构建并验证
配置插件（plugins）

插件用来解决loader无法实现的其他事

1. HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件

  • 执行下面的命令安装HtmlWebpackPlugin

npm install HtmlWebpackPlugin -D

  • 修改webpack.config.js
const path = require('path');
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [
      {test: /\.(scss|css)$/, use: ['style-loader', 'css-loader', 'sass-loader']}
    ]
  },
  // 添加插件
  plugins: [
    new HtmlWebpackPlugin({
      // 打包后创建的html文件的名字
      filename: 'index.html',
      // 模板html文件
      template: 'template.html'
    })
  ]
}

module.exports = config
  • 在根目录下创建template.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  hello word
</body>
</html>
  • 删除dist文件并重新打包构建
2. 热模块替换
  • 安装webpack-dev-server依赖

yarn add webpack-dev-server -D

  • 在package.js中进行配置
"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "hot": "webpack-dev-server"
 },
  • 在webpack.config.js中进行配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 新增加的
const webpack = require('webpack');

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [
      {test: /\.(scss|css)$/, use: ['style-loader', 'css-loader', 'sass-loader']}
    ]
  },
  // 新增加的
  devServer: {
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'template.html'
    }),
    // 新增加的
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = config
  • 执行npm run hot启动热更新
  • 启动后就可以通过localhost:8080访问到打包生成的html文件了，并且修改不用再手动进行构建
3. 配置babel
  1. 安装依赖

yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
yarn add @babel/runtime -S

  1. 跟目录下创建.babelrc文件
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}
  1. 在webpack.config.js文件中配置规则
module: {
  rules: [
    {test: /\.(scss|css)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
    {test: /\.js/, loader: 'babel-loader'}
  ]
},
  1. 在src文件中创建一个js文件，里面使用es6的语法，并在index.js中使用import引用
4. clean-webpack-plugin
  1. 安装插件

yarn add clean-webpack-plugin -D

  1. webpack.config.js配置
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
  new HtmlWebpackPlugin({
     filename: 'index.html',
     template: 'template.html'
  }),
  new webpack.HotModuleReplacementPlugin(),
  new CleanWebpackPlugin()
]
5. copy-webpack-plugin

将单个文件或整个目录复制到构建目录

yarn add copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
  new CopyWebpackPlugin([
  	// 将根目录下的assets文件夹拷贝到dist下文件名为assets
    {from: path.join(__dirname, 'assets'), to: 'assets'}
  ])
]
6. js，css，html等文件压缩

yarn add optimize-css-assets-webpack-plugin terser-webpack-plugin -D
如果需要用link来引用css文件的话还需要安装下面的插件
yarn add mini-css-extract-plugin -D

配置webpack.config.js

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const config = {
	optimization: {
    	minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  	},
  	module: {
	    rules: [
	      {test: /\.(scss|css)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']},
	      {test: /\.js/, loader: 'babel-loader'}
	    ]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[id].css',
		})
	]
}
模式mode
const config = {
	mode: 'development',
}
  • development 打包构建后的文件不进行压缩
  • production 打包构建后的文件进行了压缩
weixin_43756060
关注
专栏目录
前端工程化-webpack/cli工具
wanglu458512的博客
10-01 736
为什么要前端工程化？ webpack与grunt、gulp的不同？ Grunt、Gulp是基于任务运⾏的⼯具： 它们会⾃动执⾏指定的任务，就像流⽔线，grunt/gulp也被称为前端自动化任务管理工具，grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心 Webpack是基于模块化打包的⼯具: ⾃动化处理模块，把⼀切当成模块，当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图 (dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或
2.前端工程化-webpack
世界，太精彩
05-26 154
webpack 2.1 概述 webpack是目前流行的前端项目构建工具（打包工具），提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等强大功能，提高了开发效率和项目的可维护性。 2.2 webpack使用 1.新建项目，npm init -y 初始化包管理配置文件package.json 2.新建src 目录，新建index.html,引入index.js <!DOCTYPE html> <html lang="en"> <head> &lt
Webpack 项目工程化
编程菜鸟
01-19 920
Webpack优点 前端代码模块化开发 代码压缩混淆 处理浏览器端JavaScript兼容性 性能优化 Webpack安装配置 (先安装Node.js) Node.js 了解_编程菜鸟-CSDN博客 Webpack命令： npm i webpack webpack-cli -D 更目录下创建 webpack.config.js 修改 package.json 配置 运行脚本 注：webpack 4.x 和5.x 版本中 默...
webpack前端工程化
buyue
02-18 914
工程化包含4个现代化 1.模块化(js的模块化，css的模块化，其他资源的模块化) 2.组件化(可复用的UI结构、样式、行为) 3.规范化(目录结构划分合理，编码规范化，接口规范化，文档规范化，版本控制规范化) 4.自动化(自动化构建，自动化部署，自动化测试) 目前主流前端工程化解决方案： webpack js模块化历程 设置使用国内镜像 npm config set registry https://registry.npm.taobao.org 本文所使用的环境版本 "webpack": "^
Clean Webpack Plugin 使用教程
最新发布
gitblog_00800的博客
08-22 417
Clean Webpack Plugin 使用教程 clean-webpack-pluginA webpack plugin to remove your build folder(s) before building项目地址:https://gitcode.com/gh_mirrors/cl/clean-webpack-plugin 项目的目录结构及介绍 clean-webpack-plugi...
前端工程化之webpack
weixin_58487644的博客
01-20 376
前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
前端工程化学习之webpack的使用
qq_32021429的博客
11-11 209
webpack知识 前端工程化：模块化，组件化，规范化，自动化（自动化构建，自动化部署，自动化测试） 使用webpack作为前端构建工具： 代码优化：ts编译成js；less/sass编译成css等 文件优化：压缩js、css、html代码，压缩合并图片等 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载 模块合并：在采用模块化的项目中会有很多个模块和文件，需要构建功能把所有模块合并成一个文件 自动刷新：监听本地源代码的变化，自动重新构建代码，刷新浏览器 代码检验：在代码被提交到
webpack安装以及基本配置
connie_1990的博客
06-03 654
webpack 简介 webpack是基于模块化开发的一个工程化开发工具，因此在webpack中，任何资源（图片、css等等）都可以作为模块加载进来（当然加载的时候需要一些load加载机）。
前端工程化之gulp-webpack.pptx
09-16
前端工程化之gulp-webpack.pptx
alura-webpack:Alura-Webpack-FormaçãoVue
04-06
Webpack 是一个现代 JavaScript 应用程序的模块打包器。它将项目中的各种资源，如 JavaScript、CSS、图片等，...在 "Alura-Webpack-FormaçãoVue" 学习过程中，你将逐步掌握这些关键知识点，提升你的前端工程化能力。
学习笔记 - webpack配置
Ewigkeit_的博客
03-22 1208
webpack webpack概念：是前端工程项目的具体解决方案。 webpack功能： 提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、新跟那个优化等强大的功能。 webpack中的默认约定：webpack 4.x 5.x版本 ① 默认的打包入口文件为 src -> index.js。 ② 默认输出文件路径为 dist -> main.js。 ③ 可以在webpack.config.js中修改约定。 webpack 中的插件： ① webpack-d
Webpack5 CleanWebpackPlugin
有趣的小良的博客
07-12 1964
clean-webpack-plugin是webpack的一个小插件，由于每次打包的时候有可能文件名称和文件内容不一样，打包后的文件就叠加到输出目录下了。所以cleanWebPackPlugin作用就是在每次打包之前，先把输出目录删掉，创建最新的目录，避免一些不必要的文件还留在同一个目录下~
(掌握)webpack插件-Clean插件
小余的前端博客
04-26 448
【代码】(掌握)webpack插件-Clean插件。
webpack
无名小小卒的博客
01-12 5777
webpack
认识Webpack插件Plugin；CleanWebpackPlugin插件；HtmlWebpackPlugin；DefinePlugin；Mode模式
qq_54075517的博客
08-03 891
认识Webpack插件Plugin；CleanWebpackPlugin插件；HtmlWebpackPlugin；DefinePlugin；Mode模式
说说webpack中常见的Plugin？解决了什么问题？
常来常往，共同成长
03-25 1352
Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能。是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据。
webpack plugin源码解析(二) copy-webpack-plugin
weixin_43294560的博客
04-13 1229
用于创建文件系统的快照。快照是文件系统状态的一份副本，包含了文件的元数据以及每个文件的最后修改时间戳。
yapi入门之使用mock（一）
不完美的红烧肉的博客
03-24 3004
官方文档地址：https://hellosean1025.github.io/yapi/documents/adv_mock.html 下文为我个人的见解，如有错误，欢迎指出。 为什么要使用mock？ （1） 最重要的一点：团建可以并行工作。 1、现在大部分项目都是前后端分离的了，这就需要提前协商定义好接口，方便异步开发。只要前后端协议好接口规范以及数据结构，就可以各自干自己的活儿了，只有在项目的联调阶段才需要沟通，大大的降低了沟通成本。 2、对于后端来说，如...
接口测试-Mock测试方法
热门推荐
ecessary的博客
05-26 11万+
一、关于Mock测试 1、什么是Mock测试？ Mock 测试就是在测试过程中，对于某些不容易构造（如 HttpServletRequest 必须在Servlet 容器中才能构造出来）或者不容易获取的比较复杂的对象（如 JDBC 中的ResultSet 对象），用一个虚拟的对象（Mock 对象）来创建以便测试的测试方法。 2、为什么要进行Mock测试？ Mock是为了解决不同的单元之...
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
09-07
使用vue-cli 2.9.6版本初始化webpack工程，首先需要确保本地已安装了node.js和npm。 在命令行中执行以下命令来安装vue-cli： ``` npm install -g vue-cli@2.9.6 ``` 安装完成后，可以使用以下命令来初始化一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值