webpack
网络打包工具
在项目中安装就去掉global
yarn global add webpack
yarn global add webpack-cli
webpack --version
打包npm run build
在webpack中，只会打包压缩js文件，如果有css等其他文件，那么必须要依赖包，安装完成后需要在webpack.config,js进行配置
用插件的话实例化就行了。例如清理器等
需要创建src文件夹和index.js
默认的入口文件是src/index.js
打包命令
webpack -w --mode production //压缩
webpack -w --mode development //不压缩
如果是在项目中安装的话
**package.json
//在此文件下进行自定义更改命令，在项目目录打开命令行，执行yarn run build 就会执行此行代码，即打包项目
"scripts":{
"build":"webpack"
}
通过打包压缩 ，出口在dist/main.js
打包的好处之一：压缩体积减少http的请求次数，优化性能之一
在项目组配置webpack文件
创建和src同级文件：
**webpack.config.js
const path = require('path')
module.exports={
// 入口文件
entry:'./src/index.js',
// 出口文件
output:{
//__dirname，根据当前目录和dist生成绝对路径
path:path.resolve(__dirname,'dist'),
// 打包后的文件名字
filename:'main[hash:8].js'
},
}
下载css包
//引入时注意
yarn add style-loader
yarn add css-loader
配置loader
module:{
rules:[
{
// 正则，以.xxx结尾的文件
"test":/\.css$/,
// 使用xxxloader
use:["style-loader","css-loader"]
}
]
}
下载清理器mian.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
new CleanWebpackPlugin(),
]
清理完成后dist里的mian.js每更改一次，名字就会变化，那么每次都需要重新引入，所以需要下载自动引入
yarn add html-webpack-plugin
下载，热更新和自动打开浏览器
yarn add webpack-dev-server -w -open
打包图片
//
yarn add file-loader url-loader
es6转es5
yarn add babel-loader @babel/preset-env @babel/core
全局安装webpack
- webpack是个打包工具，脚手架是基于webpack这个打包工具的
- webpackjs.com官网
- webpack --version查看版本 ---4.38 ----现在有webpack5了
- dist为打包之后的文件
- 在webpack眼中，静态资源都是模块
-
yarn global add webpackyarn global add webpack-cli全局安装 -
yarn add webpackyarn add webpack-cli局部安装 【全局和局部都安了，优先执行全局，想换见'在项目中用webpack'】 - webpack从4以上的版本，默认的入口文件是src 下的index.js文件
- 打包操作
webpack --mode development或webpack --mode production- 注意：mode是选择打包模式，development是开发模式，不压缩，production是生产模式(上线),是压缩的
- 默认出口文件是 dist下的main.js文件
-
webpack -w --mode production加了-w 的可同步文件，不用每次改了文件内容后都重新打包，改了后刷新即可同步文件内容-
webpack --hot --mode production也有此作用
-
在项目中用webpack--局部安装
全局和局部同时都安了，在项目中想执行局部的，可以在项目的package.json中script中输
【#linux操作系统，是以命令行的为主的操作系统】
#package.json
'script':{
'test ':"echo hello world " //运行项目npm test 会出现hello world
'abc':"echo hello world " //除了test和start可省略run，否则都是npm run运行项目 //运行npm run abc 会出现hello world
'bulid':webpack --mode production //打包操作 //一般不写-w，因此处为打包操作，故不用热更新 //npm run build 进行打包
} //还有一种写法见【webpack.config.js】
}
#打包操作的好处
1.所有文件打包成了一个文件，按页面优化的规则，可以减少http的请求次数，是优化的手段之一
2.webpack打包工具可以保证每个js文件是一个独立的模块，相当于在浏览器中实现模块化，从而以模块化开发做项目，否则浏览器本身不直接支持模块化
gulp打包在页面里只引入了一个文件，然后还需要配合require.js等其他文件做模块化，目前require.js这些已经不再升级了，webpack打包工具是主流
webpack基本配置文件---webpack.config.js
- 默认的webpack 的配置文件名是 webpack.config.js ，可以改，但一般不改！
- webpack.config.js在根目录上，和src是平级的
- webpack.config.js 核心概念(4个):入口，出口，loader，插件
- loader是加载器，用于加载某一类文件时，做解析用的，即：将除了js文件以外的文件解析成标准的模块
- 插件是能对所有文件进行处理，如：清理所有文件、打开服务器增加某项功能等
- 入口是src 下的index.js文件
- 出口是 dist下的main.js文件
#webpack.config.js
const path=require('path') //不能用import 这是node环境，不支持es6的模块化
module.exports={
entry:'./src/index.js', //entry入口文件
output:{ //output出口文件,下面的对象表示指定某目录下的某文件为出口文件
path:path.resolve(__dirname,'dist'), //dirname是当前目录 //path.resolve生成绝对路径
filename:'main[hash:8].js' //为了避免文件缓存，hash8用于产生8位的hash码，加在main文件名后-->文件名带了hash码每次build会生成文件名不同的文件，不便于引入文件时写名字-->自动将改了的文件在引入处进行文件名修改&将旧文件清理的 插件和操作见下面
}
}
#index.html
//在index.html引入出口文件以应用
<script serc="dist/main.js"></script>
--->自动将旧文件清理
1.安装插件 yarn add clean-webpack-plugin
2.webpack.config.js引入插件并使用
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
new CleanWebpackPlugin()
]
--->自动将改了的文件引入
1.安装插件 yarn add html-webpack-plugin
2.webpack.config.js引入插件并使用 //一定要先将index.html中<script>去掉！
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({template: './index.html'})
]
#此为单入口和单出口，webpack支持多入口和多出口，见官网
【另外】
在package.json中可以不指定打包模式
#package.json
'script':{
'bulid':webpack
}
在webpack.config.js中指定打包模式
#webpack.config.js
mode:'production' 或 mode:'development' //可以指定打包模式
【完整写法如下】
#webpack.config.js
const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main[hash:8].js'
},
mode:'development',
devServer:{
contentBase:'dist',
inline:true
},
module:{
rules:[
{
"test":/\.css$/,
use:[
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({template: './index.html'})
]
}
webpack-dev-server --支持热更新！不用手动刷新
yarn add webpack-dev-server
- 会自动打开8080端口
#package.json
'script':{
'build':"webpack"
'serve':"webpack-dev-server -w --open" //-w 同步文件 --open自动打开浏览器
}
#webpack.config.js
devServer：{
contentBase:'dist' //默认的目录
inline:true //开启热更新
}
使用loader文件打包---非js文件的打包
- 如果不是js文件，需要各种loader文件用于打包
打包CSS文件
打包css文件需要style-loader 和css-loader
-
yarn add style-loader css-loader【注意：此处引入是有顺序的！】 - 需要配置以下
#webpack.config.js
const path=require('path')
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main[hash:8].js'
},
module:{ //loader加载的是模块module，roules是模块的规则，每个规则是一个对象，什么的模块用什么去解析
rules:[
{ test: /\.css$/, //什么的模块
use: [ //用什么去解析
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
}
}
}
打包图片文件
打包图片文件需要
style-loader和css-loaderyarn add file-loader url-loader-
需要配置以下
#webpack.config.js 写在module的rules里面 rules:[ { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, //比8192小的就base64编码打包到js中，比8192大的就单独打包到一个文件 } }, ], } ]
es6转es5
打包图片文件需要
babel-loader和@babel/core和@babel/preset-envyarn add babel-loader @babel/core @babel/preset-env
-
需要配置以下
#webpack.config.js 写在module的rules里面 rules:[ { test: /\.js$/, exclude: /node_modules/, //一定要排除module use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env','@babel/preset-react'] } } ]
配React环境
- 配React环境需要
react和react-dom和@babel/preset-react
yarn add react react-dom @babel/preset-react
配Vue环境
- 配Vue环境需要
vue和vue-loder和vue-template-complile
yarn add vue vue-loder vue-template-complile
