webpack是什么
webpack是基于js的静态模块打包工具
打包:将多个文件压缩合并成一个文件,可以减少请求次数,减轻服务器的压力.
webpack做了哪些事
1:语法转换
1:es6新语法,=>es5/es3的兼容性的代码
2:typescript简称ts
3:less/sass/stylus css预处理器
2:html/css/js进行打包,,进行代码的压缩合并
3:webpack可以起一个开发服务器
1:自动打开浏览器
2:监视文件代码变化
3:保存时,自动刷新浏览器
上线前,一定先打包后上线
webpack中:一切的静态资源,都可以当成模块。
webpack基本使用步骤
- 项目的初始化,目的:生成
`package.json
文件
npm init -y;
// 注意点:项目(文件夹)的名字不能有中文
- 安装webpack的依赖包
npm i -D webpack webpack-cli
- 给
package.json
配置一个脚本
"scripts": {
"build": "webpack --config webpack.config.js"
}
- 在根目录创建webpack的配置文件
webpack.config.js
// 主要用于提供webpack的配置,可以先什么都不写
- 运行命令
yarn build
// 注意:webpack没有任何配置的情况下,会对src下的index.js进行打包。。。。所以需要提供一个Index.js文件
webpack配置入口
所有的webapck都应该配置到对象中
module.exports = {
}
通过entry去配置webpack的入口
// 配置webpack的入口
entry: './src/main.js'
webpack配置出口
webpack出口配置
// 配置webpack的出口
output: {
// webpack的出口所在的目录,默认是dist,如果需要提供,必须是绝对路径
path: path.join(__dirname, 'dist'),
// 出口的文件
filename: 'bundle.js'
}
webpack配置打包模式
webpack提供了两种模式进行打包
development: 开发模式,,打包不压缩,文件大,打包速度快
production: 生产模式,打包需要压缩,文件小,打包速度慢
mode: 'production'
mode: 'development'
webpack配置html插件生成html
- 安装依赖包
npm i -D html-webpack-plugin
- 配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
webpack处理css文件
- 安装依赖包
npm i -D css-loader style-loader
- 添加css-loader的配置
module: {
rules: [
// 加载css的规则
{
test: /\.css$/,
// loader的加载顺序是从右往左加载
use: ['style-loader' ,'css-loader']
}
]
}
webpack处理less文件
- 安装依赖包
npm i -D less-loader less
- 添加less-loader的规则
// 加载less的规则
{
test: /\.less$/,
use: ['style-loader' ,'css-loader', 'less-loader']
}
webpack处理图片
- 安装依赖包
npm i -D file-loader url-loader
- 配置url-loader的处理
// 加载图片的规则
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024
}
}
}
webpack处理字体图标
也是用url-loader,和处理图片一模一样
- 安装依赖包
npm i -D file-loader url-loader
- 配置url-loader的处理
// 加载字体图标的规则
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024
}
}
}
webpack处理音频和视频
也是用url-loader,和处理图片一模一样
- 安装依赖包
npm i -D file-loader url-loader
- 配置url-loader的处理
// 加载音视频的规则
{
test: /\.(mp3|mp4|ogg)$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024
}
}
}
使用mini-css-extract-plugin插件提取CSS
默认webpack会把css样式也打包到bundle.js中,缺点:项目中的样式比较多,如果都打包到一起,会导致打包的bundle.js文件过大。
- ExtractTextWebpackPlugin 从 bundle 中提取文本(CSS)到单独的文件 , 注意 这个插件只适用于 webpack 3.x以前的版本
- mini-css-extract-plugin 是webpack4.x版本用到的一个插件,用于从 bundle 中提取文本(CSS)到单独的文件
- 安装依赖包
npm install -D mini-css-extract-plugin
- 配置这个插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 配置插件
plugins: [
new MiniCssExtractPlugin({
// 指定生成的css文件名和路径
filename: './css/index.css',
})
],
- 配置插件的loader
// 加载css的规则
{
test: /\.css$/,
// loader的加载顺序是从右往左加载
// 把css-loader处理后的结果 不交给style-loader进行展示,交给MiniCssExtractPlugin这个插件
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 指定加载资源的路径
publicPath: '../'
}
},
'css-loader'
]
},
// 加载less的规则
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 指定加载资源的路径
publicPath: '../'
}
} ,
'css-loader',
'less-loader'
]
},
给图片和字体图标指定文件夹
图片的配置
// 加载图片的规则
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024,
// 指定文件的生成的名字 使用原来的名字
name: '[name].[ext]',
// 指定输出目录
outputPath: './images'
}
}
},
字体图标的配置
// 加载字体图标的规则
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024,
name: '[name].[ext]',
outputPath: './fonts'
}
}
},
配置babel-loader用于处理高版本的js语法
开发的时候,希望尽可能使用高版本的js语法, ES6 ES7 ES8 通过webpack配置babel-loader可以把高版本的js语法变成低版本的js语法。
- 安装包
npm install -D babel-loader @babel/core @babel/preset-env
- 配置babel-loader
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
webpack-dev-server的使用
webpack-dev-server类似于webpack包,但是webpack-dev-server不是用于打包的,而是启动一个开发服务器,这个服务器会自多个监听代码的变化,并且自动帮我们重新打包。
- 安装
npm i webpack-dev-server -D
- 配置一个新的脚本
// 用于上线打包使用
"build": "webpack --config webpack.config.js",
// 用于开发环境使用
"dev": "webpack-dev-server --config webpack.config.js"
注意:千万不要使用vscode的自动保存功能
webpack-dev-server的配置
// 可以自动打开浏览器
open: true
// 修改服务器的端口
port: 3000
// 反向代理
proxy:
vue的单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html#ad
webpack处理vue文件
- 安装依赖 vue
npm i vue
- src下面提供
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>
<div id="app"></div>
</body>
</html>
- 在src下新建
App.vue
组件作为根组件
<template>
<div>
我是根组件
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
- 在
main.js
中把App渲染为根组件
// 导入Vue
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 把App组件渲染到页面中
// 根组件的内容不由el来提供,应该有App组件来提供
const vm = new Vue({
el: '#app',
// 固定写法:把App组件渲染到页面
render: function (createElement) {
return createElement(App)
}
})
- 启动项目
npm run dev
会报错
webpack配置vue-loader
https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE
- 安装包
npm install -D vue-loader vue-template-compiler
- 配置vue的loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin()
]
}
1 条评论
咦?怎么还再用Babel?SWC安排上