webpack基础知识

一、基础

1 安装

npm i -g webpack webpack-cli

// 推荐安装至本地
npm i -D webpack webpack-cli

2 webpck基础使用

2.1 webpack-cli

Npm 5.2以上的版本中提供了一个npx命令

npx想要解决的主要问题、就是调用项目内部安装的模块、即就是在node_modules下的.bin目录中找到对应的命令执行

使用webpack命令: npx webpack

Webpack4.0之后可以实现0配置打包构建、0配置的特点就是限制较多、无法自定义很多配置

开发过程中还是使用webpack配置进行打包构建

2.2 webpack配置

Webpack 四大核心概念

入口entry — 程序的入口js
输出 output — 打包后存放的位置
加载器loader — 用于对模块的源代码进行转换
插件plugins — 解决loader无法解决的问题

基本配置

配置 webpack.comfig.js
运行 npx webpack

// 运行默认webpack.config.js文件
npx webpack
npx webpack webpack.config.js

// 运行自定义配置文件
npx webpack --config webpack.custom.config.js

//package.json 配置
"dev": "webpack --config webpack.custom.config.js",
"dev1": "npx webpack --config webpack.custom.config.js", // npx 可省略、会自动在node_modules里面找
"dev2": "webpack"

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  },
  mode: 'development'
}

2.3 自动编译工具配置

每次要编译代码时，需要运行npm run dev比较烦，webpack提供了几个选项、可以自动编译

webpack watch mode
webpack-dev-server
webpack-dev-middleware

多数场景中、推荐使用webpack-dev-server

2.3.1 watch

在webpack指令后面加上--watch参数即可

主要的作用就是监视本地项目文件的变化、发现有修改的代码就会自动编译打包、生成输出文件

通过cli的方式设置watch参数

配置package.json
```
"watch": "webpack --watch"
```
运行 npm run watch

通过配置文件对watch的参数进行修改

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  },
  // 开启监视模式、此时执行webpack指令进行打包会监视文件变化自动打包
  watch: true
}

2.3.2webpack-dev-server (重点)

简单配置

安装devServer

安装devServer需要依赖webpack、必须在项目依赖中安装webpack

npm i -D webpack-dev-server
index.html中
```
<script src='/bundle.js'></script>
```
运行
```
npx webpack-dev-server
```

运行

npx webpack-dev-server --hot --open --port 9527

配置package.json

"dev": "webpack-dev-server  --contentBase src --compress --hot --open --port 9527"

// --contentBase src 是以src为根目录， 否则以项目为根目录
// --open 自动打开
// --port 端口号
// --hot 热模块更新
// --compress 利用express开启gzip压缩

运行
```
npm run dev
```

devServer 会在内存中生成一个大包好的bundle.js，专供开发时使用，打包效率高，修改代码后会自动打包重新打包以及刷新浏览器

修改webpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  },
  // 将cli中的参数 在配置文件中进行配置
  devServer:{
    hot:true,
    open: true,
    port:9527,
    compress: true,
    contentBase:'./src'
  }
}

2.3.3 html插件

安装 html-webpack-plugin 插件
```
npm i -D html-webpack-plugin
```

在 webpack.config.js 中 plugins 节点下配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins:[
 new HtmlWebpackplugin({
     filename: 'index.html', // 生产的文件名称
     template: './src/index.html' // 将此目录下的文件作为模板生成一个新的html、放置在根目录的内存中
 })
]

devServer时、根据模板在express项目根目录下生成html文件、类似于devServer生成内存中的bundle.js
devServer时、自动引入 bundle.js
打包时会自动生成index.html

2.3.4 webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)、它可以把webpack处理后的文件传递给一个服务器(server)、webpack-dev-server 在内部使用了它、同时、它可以作为一个单独的包来使用、以便进行更多自定义设置来实现更多的需求

安装express 和 webpack-dev-middleware
```
npm i -D express webpack-dev-middleware
```

新建 server.js

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config')

const app = express()
const compiler = webpack(config)

app.use(webpackDevMiddleware(compiler, {
  publicPath:'/'
}))

app.listen(3333, function () {
  console.log('port:3333');
})

如果要使用middleware、必须使用html-webpack-plugin插件、否则html文件无法正确的输出到express服务器的根目录

2.3.5 总结

只有在开发时才需要使用自动编译工具

项目上线时都会直接使用webpack进行打包构建、不需要使用这些自动编译工具

自动编译工具只是为了提高开发体验

2.4处理CSS

安装 css-loader style-loader
```
npm i -D css-loader style-loader
```

配置web pack

module:{
 rules:[
     // 配置的是用来解析.css文件的loader，css-loader、style-loader
     // css-loader -- 解析css文件
     // style-loader -- 将解析出来的结果 放到html中 使其生效
     {
         test:/\.css$/,
         use:['style-loader', 'css-loader'] // webpack底层调用这些loader的顺序是从右向左
     }
 ]
}

2.5 处理less和scss

安装

npm i -D less less-loader sass-loader node-sass

配置less

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

配置sass

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

2.6处理图片和字体

下载、url-loader 封装了 file-loader
```
npm i -D file-loader url-loader
```

配置

配置 filte-loader

{ // 处理图片
  test: /\.(png|jpg|gif)$/,
  use: 'file-loader'
},
{ // 处理字体图标文件
  test: /\.(woff|woff2|eot|svg|ttf)$/,
  use: 'file-loader'
},

配置url-loader

{
 test:/\.(png|jpg|gif)$/,
 use:{
     loader: 'url-loader',
     options: {
         // limit 表示若图片的大于5KB、就以路径的形式展示、小于的话就用base64格式展示
         limit: 5 * 1024,
      outputPath:'images', // 图片生成的文件夹名称
      name:'[name]-[hash:6].[ext]' // 生成的图片名称
     }
 }
 //use 也可以写成数组
 use:[{
    loader:'url-loader',
    options:{
     limit: 12 * 1024
    }
  }]
}

2.7 babel

安装

npm i -D babel-loader @babel/core @babel/preset-env

如果需要支持更高级别的es6语法、可以继续安装插件、在官网找对应的插件安装
```
npm i -D @babel/plugin-proposal-class-properties 
```

配置

{
 test: /\.js$/,
 use: {
     loader: 'babel-loader',
     options: {
         presets: ['@babel/env'],
         plugins: ['@babel/plugin-proposal-class-properties']
     }
 },
 exclude: /node_modules/,
 include: path.resolve(__dirname, '../src')
}

官方更加建议使用 .babelrc 配置

{
 "presets": ["@babel/env"],
 "plugins": ["@babel/plugin-proposal-class-properties"]
}

3.1 如果需要使用 genetator，无法直接使用 babel 进行转换，因为会将 generator 转换为一个 regeneratorRuntime，然后使用 mark 和 wrap 来实现 generator

安装插件

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime

配置中、修改 plugins


plugins: [
 '@babel/plugin-proposal-class-properties',
 '@babel/plugin-transform-runtime'
]

3.2 如果需要使用 ES6/7 中对象原型提供的新方法，babel 默认情况无法转换，即使用了 plugin-transform-runtime 的插件也不支持转换原型上的方法，需要使用 polyfill

安装
```
npm i -S @babel/polyfill
```
在需要使用该模块的地方直接引入
```
import '@babel/polyfill'
```

2.8 插件

2.8.1 clean-webpack-plugin

该插件可以用于自动清除dist目录后重新生成，在 npm run build 的时候非常有用

安装插件
```
npm i -D clean-webpack-plugin
```

引入插件

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

配置插件

plugins:[
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
  }),
  new CleanWebpackPlugin()
],

2.8.2 copy-webpack-plugin

安装
```
npm i -D copy-webpack-plugin
```

引入插件

const CopyPlugin = require('copy-webpack-plugin');

配置插件

from:源、从哪里拷贝，可以是绝对路径或者绝对路径，推荐绝对路径

to:目标、拷贝到哪里去，相对于output的路径，同样可以是相对路径或者绝对路径，更推荐相对路径、直接相对于dist目录即可
```
plugins:[
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
  }),
  new CleanWebpackPlugin(),
  new CopyPlugin([
    {
      from: path.join(__dirname, 'static'),
      to: 'static'
    }
  ])
],
```

2.8.3 BannerPlugin

是一个webpack内置插件、用于给打包的js文件加上版权注释信息

引入webpack插件
```
const webpack = require('webpack')
```

配置

plugins:[
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
  }),
  new CleanWebpackPlugin(),
  new CopyPlugin([
    {
      from: path.join(__dirname, 'static'),
      to: 'static'
    }
  ]),
  new webpack.BannerPlugin('王耀的版权信息')
],

原文地址：https://www.cnblogs.com/nordon-wang/p/11247416.html

时间： 2024-10-05 06:42:52

webpack基础知识的相关文章

前端团队成长计划（一）：基础知识梳理

一个月前我开始了前端团队的成长计划,主要主语两方面的考虑:校招应届生能快速进入工作的状态达到一个能支撑业务的技能水平,提前学习主流前端技术,为未来的业务代码重构做储备.5月是整个计划的第一个阶段,主要的任务是,梳理常规前端基础知识和开发技能. 5月的计划如下:(偏基础) 1.js和css的一些规范以及常规功能如何实现: 2.了解现有业务工程的开发,部署,上线流程以及原理,做到可交叉维护: 3.初步了解gulp,为下一阶段做准备. 4.了解PC开发中常见的问题以及IE浏览器的兼容方式(IE8+)

MySQL数据库基础知识

day02 MySQL数据库基础知识一.基础知识概述: 基础决定你这门课程的学习成败!只有学习好这些基础知识以后,你才能真正的运用自如.才能够对数据库有更深入的了解,道路才会越走越远. 二.基础知识: 1.数据库(database):数据库就好比是一个物理的文档柜,一个容器,把我们整理好的数据表等等归纳起来. 创建数据库命令: create database 数据库名; 2.查看数据库 show databases; 3.打开指定的数据库 use

linux入门基础知识及简单命令介绍

linux入门基础知识介绍 1.计算机硬件组成介绍计算机主要由cpu(运算器.控制器),内存,I/O,外部存储等构成. cpu主要是用来对二进制数据进行运算操作,它从内存中取出数据,然后进行相应的运算操作.不能从硬盘中直接取数据. 内存从外部存储中取出数据供cpu运存.内存的最小单位是字节(byte) 备注:由于32的cpu逻辑寻址能力最大为32内存单元.因此32位cpu可以访问的最大内存空间为:4GB,算法如下: 2^32=2^10*2^10*2^10*2^2 =1024*1024*1024

BroadcastReceive基础知识总结

BroadcastReceive基础知识总结 1.BroadcastReceive简介 BroadcastReceive也就是"广播接收者"的意思,顾名思义,就是用来接收来自系统和应用中的广播在Android系统中,广播体现在方方面面,例如当开机完成后系统会产生一条广播,接收到这条广播就能实现开机启动服务的功能,当网络状态改变时,系统会产生一条广播,接收到这条广播,就能及时的做出提示和保存数据等操作,当电池的电量改变的时候,系统会产生一条广播,接收到这条广播就能在电量低的时候告知用户

基础知识--:before伪元素和:after伪元素

http://book.51cto.com/art/201108/285688.htm 3.7 替换指定位置大家都知道before和after是前.后的意思.但是奇怪的是,CSS中的:before伪元素和:after伪元素是为源文档中不存在的内容设置样式的. 没有内容怎么设置样式呢?别急!它们有一个content属性,一起使用就可以为某个选择器前.后的内容设置样式了. 下面就来了解一下:before伪元素和:after伪元素的用法. 视频教学:光盘/视频/3/3.7 替换指定位置.avi

20_Shell语言———VIM编辑器基础知识三之窗口属性定制、配置文件及查找替换功能

Vim编辑器可以让用户按照需求来定制一些使用属性. 一.窗口属性定义 1)显示行号行号不是内容,只是用来帮助用户确认文本所在的行.在vim编辑器中,如果要显示行号,可以在末行模式下输入: set number 如果想关闭,则可以在功能名称前面加上no,即: set nonumber 命令可以被简写,如set number 可以简写为 set nu:set nonumber 可以简写为 set nonu. 注意,上述设定仅对当前vim的进程有效,一旦当前进程关闭,这些设定就会失效,如果要使设定永

web基础知识（一）关于ajax传值最基础东西

HTTP方法之 GET对比POST GET:从指定的资源请求数据, POST:向指定的资源提交要被处理的数据 GET方法: 请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的: /test/demo_form.asp?name1=value1&name2=value2 有关 GET 请求的其他一些注释: GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制 GET 请求只应当用于取回

线程基础知识

什么是线程: 在一个程序里的一个执行路线就叫做线程(thread).更准确的定义是:线程是"一个进程内部的控制序列" 一切进程至少都有一个执行线程进程与线程进程是资源竞争的基本单位线程是程序执行的最小单位线程共享进程数据,但也拥有自己的一部分数据线程ID 一组寄存器栈 errno 信号状态优先级 fork和创建新线程的区别当一个进程执行一个fork调用的时候,会创建出进程的一个新拷贝,新进程将拥有它自己的变量和它自己的PID.这个新进程的运行时间是独立的,它在执行时几乎

Keepalived基础知识

大纲: 一.什么是Keepalived? 二.VRRP协议简介. 三.Keepalived原理. 四.Keepalived配置文件详解. 五.Keepalived配置示例. 一.什么是Keepalived? 什么是Keepalived呢,keepalived观其名可知,保持存活,在网络里面就是保持在线了,也就是所谓的高可用或热备,用来防止单点故障(单点故障是指一旦某一点出现故障就会导致整个系统架构的不可用)的发生,那说到keepalived时不得不说的一个协议就是VRRP协议,可以说这个协议就是