webpack简单介绍
webpack
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
https://www.webpackjs.com
rollup
pacel
如果全局 没有安装 运行局部 在package.json scripts脚本中运行
四个核心概念
-
入口(entry)
默认的入口是 src目录下的index.js
-
输出(output)
dist
-
loader
-
插件(plugins)
-
模式 production/development
命令webpack
安装
mkdir webpack-demo
npm init
npm install webpack webpack-cli -D
package.json
新建项目目录 src
src
index.js 默认是如果没有配置
console.log("hello webpack");
运行webpack 报错 没有全局安装
package.json
"scripts":{
"build":"webpack"
}
//设置mode
"scripts":{
"build":"webpack --mode production"
}
webpack配置文件
1，根目录下 新建webpack.config.js
const path = `require`('path');
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
entry:{
//里面的entery是可以随便写的
entry:'./src/entry.js'
},
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'bundle.js'
},
多入口
entry:{
//里面的entery是可以随便写的
entry1:'./src/entry1.js',
entry2:"./src/entry2.js"
},
出口
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'[name].js'
filename:'[name].[hash].js' //加hash
filename:'[name].[chunkHash].js' //根据内容是否变化
filename:'[name].[chunkHash:8].js'
}
自定义webpack.config.js
新建 scripts文件夹中 将配置文件 放进文件夹中，且可以自定义名字
config.js
package.json中指定
"scripts":{
"build":"webpack --mode production --config scripts/config.js"
}
此时注意出口问题
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'), //目录不对了 使用
path:path.resolve(process.cwd(),'dist'),//node的运行目录
//打包的文件名称
filename:'[name].[chunkHash:8].js'
}
配置基本开发环境
1，src下新建html
src/public/index.html
使用html-webpack-plugin处理html，
安装：npm i html-webpack-plugin -D
配置文件中：
const htmlPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
title: 'My App', //指定html的title
template: 'src/assets/index.html' //指定处理哪个html
})
]
<%= htmlWebpackPlugin.options.title %> 在html中引入title
2，处理css
style-loader css-loader
处理结果：
css loader将css转换成webpack可识别的js
style-loader新建 style标签 插入到head中
npm i style-loader css-loader -D
如何配置loader
style.css
入口文件中
import "./css/style.css"
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'], //执行顺序从后往前
},
],
},
此时：css是在打包的js中，实际开发中，经常需要单独提取css
loader写法：
1，
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
2，
module:{
rules:[
{
test:/\.css$/,
loader:['style-loader','css-loader']
}
]
},
3，
module:{
rules:[
{
test:/\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
},
3， 如何分离css
mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
new MiniCssExtractPlugin({
//filename: '[name].css',
//filename: '[name].[chunkhash:8].css', //加hash
filename: 'css/[name].[chunkhash:8].css', //加hash 统一放进css中
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
],
},
4，本地服务器开启
webpack-dev-server
npm install webpack-dev-server --save-dev
scripts": {
"start": "webpack-dev-server"
}
devServer:{
proxy: {
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
}
},
contentBase: path.join(__dirname, "dist"),
hot: true,
port:4000,
open:true
}
5，处理 css预处理器
less
npm i less less-loader -d
module: {
rules: [
{
test: /\.less$/,
loader: 'less-loader', // compiles Less to CSS
},
],
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader'
},
'less-loader'
],
},
],
6,处理css前缀
::placeholder
postcss-loader 注意使用顺序
autoprefixer 插件
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
],
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader'
},
'postcss-loader',
'less-loader'
],
},
],
跟目录创建
postcss.config.js postcss-loader 配置文件 中引入 autoprefixer这个插件
module.exports = {
plugins: [
require('autoprefixer')
]
}
broserslist 读取can i use 处理兼容性
package.json 加
"browserslist": [
"last 2 versions",
"not ie <= 8"
]
7，file-loader url-loader 处理图片资源
file-loader
{
test: /\.(png|jpe?g|gif)$/i,
use: [{
loader: 'file-loader',
options:{
name:'images/[name].[hash:8].[ext]',
publicPath:"../" //引入的路径
}
}, ],
}
url-loader 对于图片的处理 可以将图片转成base64格式
url-loader和file-loader之间的关系：url-loader中引入了file-loader 如果 图片 小于 url-loader限定值，使用url-loader 变成base64 如果 大于：使用file-loader
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 22*1024,
//如果小于 这个值 就转换成 base64 如果大于 就 变成图片
name:'images/[name].[hash:8].[ext]',
publicPath:"../" //引入的路径
},
},
],
}
8,copy-webpack-plugin 拷贝文件，处理不需要webpack处理的文件 如 字体文件
9,babel-loader 增加es6支持
10，vue-loader
vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
rules 配置
{
test: /\.vue$/,
use: ['vue-loader']
},
plugins: [
new VueLoaderPlugin(),
]
main.js 入口
render: h => h(App) vue-loader提供的