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('王耀的版权信息')
],
webpack基础知识的更多相关文章
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- Webpack基础知识总结
本文将从多个方面回顾下自己了解的Webpack知识,包括常见的配置项,前端搭建的一些方法和项目实际优化方法,有错误的地方还请指出并多多包涵. 一.关于Webpack 1.概念 本质上,webpack ...
- webpack基础知识介绍
1.开发模式 开发模式顾名思义就是我们开发代码时使用的模式 webpack默认只处理js文件,对样式是没办法处理的.因此要处理css资源需要引入CSS-loader 处理CSS资源 如果要使用 css ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- vue3 自学(一)基础知识学习和搭建一个脚手架
两年前曾自学过几天vue,那时候版本还是vue2,但后来项目中一直没用到,当时也觉得学习成本太高,便没有继续学习下去.初学者可以看下链接文章以前的吐槽~~ 学习 Vue ,从入门到放弃 最近部门决定升 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
- Java基础知识(壹)
写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
随机推荐
- C#每天进步一点--事件
事件:如果类型定义了事件成员,那么类型就可以通知其他对象发生了特定的事情.例如,Button类提供了一个名为Click的事件.应用程序中的一个或者多个对象可能想接收关于这个事件的通知,以便在Butto ...
- C#爬虫与反爬虫--字体加密篇
爬虫和反爬虫是一条很长的路,遇到过js加密,flash加密.重点信息生成图片.css图片定位.请求头.....等手段:今天我们来聊一聊字体: 那是一个偶然我遇到了这个网站,把价格信息全加密了:浏览器展 ...
- cloudsim 3.0.3下载与安装教程
1.配置jdk(之前的文章都讲解过,这里就不具体说了) 2.安装eclipse或MyEclipse 3.下载cloudsim压缩包,这个的官网是需要FQ,这里贴上我的下载地址 链接:https://p ...
- oracle11g安装时出现程序未找到文件解决办法
在安装的最后可能会出现如下问题 解决办法如下 将win64_11gR2_database_2of2中的\win64_11gR2_database_2of2\database\stage\Compone ...
- C语言实现常用数据结构——图
#include<stdio.h> #include<stdlib.h> #define SIZE 20 #define LENGTH(a) (sizeof(a)/sizeof ...
- java关键字-final
final特点: 1:这个关键字是一个修饰符,可以修饰类,方法,变量. 2:被final修饰的类是一个最终类,不可以被继承. 3:被final修饰的方法是一个最终方法,不可以被覆盖. 4:被final ...
- ZooKeeper学习第五期--ZooKeeper管理分布式环境中的数据(转)
转载来源:https://www.cnblogs.com/sunddenly/p/4092654.html 引言 本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它 ...
- javascript (java)动态时钟
<script language="javascript"> var t = null; t = setTimeout(time,1000);//开始执行 functi ...
- scala class中孤立代码块揭秘
在 scala class中,经常会有很多的代码块需要执行,它们不在任何方法中,只是孤立的代码块. 案例: class Tester(val name:String, num:Integer) { p ...
- Kafka 学习之路(三)—— Kafka生产者详解
一.生产者发送消息的过程 首先介绍一下Kafka生产者发送消息的过程: Kafka会将发送消息包装为ProducerRecord对象, ProducerRecord对象包含了目标主题和要发送的内容,同 ...