文章目录
webpack概述
webpack
是一个流行的前端项目构建工具(打包工具)
,可以解决当前web开发中所面临的困境
webpack提供了友好的模块化支持
,以及代码压缩混淆
、处理js兼容问题
、性能优化
等强大功能,提高了开发效率和项目的可维护性
webpack的基本使用
1.创建列表隔行变色项目
基本步骤为:
- 新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件 package.json
- 新建src 源代码目录
- 初始化首页基本的结构
- 运行npm install jquery -s 命令,安装jQuery
- 通过模块化的形式,实现列表隔行变色效果
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>
<script src="index.js"></script>
</head>
<body>
<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>
</body>
</html>
index.js
//使用模块化的方式导入jquery
import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'pink')
$('li:even').css('backgroundColor', 'lightblue')
})
但是我们运行的结果渲染不上去
那是因为我们的浏览器不支持ES6的语法,我们要配置webpack,具体解决步骤如下:
-
运行
npm install webpack webpack-cli -D
命令,安装webpack相关包 -
在项目根目录中,创建webpack.config.js的webpack配置文件
module.exports = { //编译模式 mode: 'development' //development production(用来指定构建模式) }
-
在package.json配置文件中的scripts节点下,新增dev脚本:
-
在终端运行
npm run dev
,进行webpack项目打包,到main.js -
最后我们吧之前index.html引入index.js文件替换成咱们dist目录下的main.js文件就可以了
然后我们在运行就可以了
配置打包文件的入口与出口
webpack的4.x版本中默认约定:
- 打包的
入口文件
为scr—>index.js - 打包的输出文件为dist—>main.js
如果要修改打包的入口与出口,可以在webpack.config.js
中新增如下配置信息:
//导入node.js中专门操作路径的模块
const path = require('path')
module.exports = {
//入口文件 __dirname表示根目录
entry: path.join(__dirname, './src/index.js'),
//输出文件
output: {
path: path.join(__dirname, './dist'), //输出文件的存放路径
filename: 'bundle.js' //输出文件的名称
}
}
然后我们根据命令npm run dev
进行打包,就会生成bundle.js
文件
最后我们再把index.html
中script中src路径改为bundel.js
就可以了
但是我们发现,我们每次进行增加或修改文件都必须得再次的输入命令,进行打包,所以我们要配置一下自动打包的功能,方便我们的使用
配置webpack的自动打包功能
-
运行npm install webpack-dev-server -D命令,安装支持项目自动打包的工具
-
修改package.json -> scripts 中的dev命令如下:
-
为了避免版本兼容问题我们要修改一下package.json中的配置
改完后,我们还要输出 npm install 下载这些包
-
将src -> index.html中,script脚本的引用路径,修改为"/buldle.js"
-
运行npm run dev命令,重新进行打包,然后他就处于一直在运行的状态,随时监听我们的修改
-
最后我们在浏览器访问
127.0.0.1:8080
就能看到效果了
配置html-webpack-plugin生成预览页面
我们每次访问端口号进入页面的时候,都得点入src才能进去比较麻烦:
所以我们给他配置一个自动生成的预览页面,方便我们操作和使用。
-
运行npm install html-webpack-plugin -D命令,安装生成预览页面的插件
-
修改webpack.config.js文件头部区域,添加如下配置信息:
//引入配置文件 const HtmlWebpackPlugin = require('html-webpack-plugin') //创建插件的实例对象 const htmlPlguin = new HtmlWebpackPlugin({ //指定要用到的模板文件 template: './src/index.html', //指定生成的文件的名称,改文件存在于内存中,在目录中不显示 filename: 'index.html' })
-
修改
webpack.config.js
文件中向外暴露的配置对象,新增如下配置节点:module.exports = { plugins: [htmlPlguin] }
然后我们运行npm run dev
通过127.0.0:8080就直接可以访问了
配置自动打包相关的参数
package.json中的配置
--open
打包完成后自动打开浏览器页面
--host
配置IP地址
--posrt
配置端口
修改package.json中scripts的配置:
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
然后我们再运行文件就可以直接访问到了浏览器的页面了,并且端口号也发生了改变
webpack中的加载器
通过loader打包非js模块
在实际开发过程中,
webpack
默认只能打包处理以.js后缀名结尾的模块,其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader
加载器才可以正常打包,否则会报错!
loader
加载器可以协助webpack
打包处理特定的文件模块,比如:
less-loader
可以打包处理.less相关的文件sass-loader
可以打包处理.scss 相关的文件url-loader
可以打包处理css 中与url路径相关的文件
loader的调用过程
打包处理css文件
-
运行
npm i style-loader css-loader -D
命令,安装处理css文件的loader -
在
webpack.config.js
的module -> rules 数组中,添加loader
规则如下:// 所有第三方模块的匹配规则 module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] }
其中,
test
表示匹配的文件类型,use
表示对应要调用的loader -
配置完后,我们就可以通过引入css文件就可以正常的执行他了
如:新建一个css文件夹,里面建一个1.css文件
li { list-style: none; }
然后我们在index.js也得把这个css引过去
import './css/1.css'
配置完后,就可以通过 npm run dev来运行文件了,此时css设置已经生效了
注意
:
- use数组中指定的loader顺序是固定的
- 多个loader的调用顺序是:从后往前调用
打包处理less文件
-
运行npm i less-loader less -D命令
-
在webpack.config.js的module -> rules数组中,添加loader规则如下:
// 所有第三方模块的匹配规则 module: { rules: [{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }] } }
-
通过上述配置,我们基本就完成了,接下来我们新建一个.less的文件,然后里面给他加一点点样式
2.less
body{ margin: 0; padding: 0; } ul{ padding: 0; margin: 0; }
别忘了我们还得把写好的.less文件引入到js的文件中
import './css/2.less'
-
最后我们通过 npm run dev 运行文件就可以了,可以看到我们设置的样式发生了改变。
打包处理scss文件
-
运行npm i sass-loader node-sass -D命令
-
在webpack.config.js 的module -> rules 数组中,添加loader规则如下:
// 所有第三方模块的匹配规则 module: { rules: [{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }] }
-
然后同上述一样,建一个.scss的文件
1.scss
ul { font-size: 12px; li { line-height: 50px; } }
-
吧1.scss文件引入到js的文件中
import './css/1.scss'
-
最后我们通过 npm run dev 运行文件就可以了,可以看到我们设置的样式发生了改变。很清楚的看到了我们设置的行高发生了变化
配置postCSS自动添加css的兼容前缀
-
运行npm i postcss-loader autoprefixer -D命令
-
在项目根目录中创建postcss 的配置文件postcss.config.js,并初始化如下配置:
const autoprefixer = require('autoprefixer')//导入自动添加前缀的插件 module.exports = { plugins: [autoprefixer]//挂载插件 }
-
在webpack.config.js 的module -> rules数组中,修改css 的loader 规则如下:
// 所有第三方模块的匹配规则 module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }] }
-
完成配置,通过npm run dev运行
打包样式表中的图片和字体文件
-
运行npm i url-loader file-loader -D命令
-
在webpack.config.js 的module -> rules数组中,添加loader规则如下:
// 所有第三方模块的匹配规则 module: { rules: [{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: ['url-loader?limit=24,599'] }] }
其中
?
之后的是loader
的参数项。
limit
用来指定图片的大小,单位是字节(byte),只有小于limit 大小的图片,才会被转为base64图片 -
我们通过css给样式添加一个背景图片,然后通过npm run dev就可以吧我们的图片加载进来了
打包处理js文件中的高级语法
-
安装babel转换器相关的包:
npm i babel-loader @babel/core @babel/runtime -D
-
安装babel语法插件相关的包:
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
-
在根目录下,创建配置文件
babel.config.js
并初始化一下配置module.exports = { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'] }
-
在webpack.config.js 的module -> rules数组中,添加loader规则如下:
// 所有第三方模块的匹配规则 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }] }
exclude
为排除项,表示babel-loader
不需要处理node_modules
中的 js 文件 -
我们的基本配置就已经完成了,然后我们在js文件中创建一个class的类,然后定义个方法输出
class Person { static info = 'aaa' } console.log(Person.info)