webpack
打包样式资源
css-loader、style-loader
npm i css-loader style-loader -D
css文件
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: sandybrown;
}
#box {
width: 300px;
height: 300px;
background-color: seashell;
border: 1px solid palegoldenrod;
border-radius: 10px;
}
#box p {
text-align: center;
font-size: 20px;
color: rgb(95, 94, 94);
}
less文件
.title {
color: gold;
font-weight: bolder;
}
#box {
width: 300px;
height: 300px;
background-color: seashell;
border: 1px solid palegoldenrod;
border-radius: 10px;
}
#box p {
text-align: center;
font-size: 20px;
color: rgb(95, 94, 94);
}
js文件（入口文件）
import './base.less';
import './index.css';
webpack配置文件：webpack.config.js
作用：运行webpack（打包）时，会根据这里面的配置项来进行加载
所有的构建工具都是基于node.js平台运行，node.js默认采用CommentJS模块化,而src中的源代码采用的是ES6模块化
__dirname：是node.js的一个变量，代表当前文件（webpack.config.js）的目录的绝对路径
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}, {
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
},
mode: 'development'
}
过程：
npm init -y
npm i webpack webpack-cli -D
npm i css-loader style-loader -D
npm i less less-loader -D
打包：
第一种方式：
webpack ./src/index.js -o ./dist --mode=development
第二种方式：简写的打包方式
webpack
在dist文件夹下创建一个html文件，引入打包好的文件，检测打包使用是否成功
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 class="title">人生长途漫漫</h3>
<div id="box">
<p>好好学习——天天向上</p>
<p>干饭人，干饭魂，干饭的都是人上人</p>
</div>
<script src="./main.js"></script>
</body>
</html>
loader（模块）：1.下载，2.使用（配置loader）
plugins（插件）：1.下载，2.引入，3.使用
打包html资源
安装：
npm i html-webpack-plugin -D
引入
//HtmlWebpackPlugin是一个构造函数（类）
const HtmlWebpackPlugin = require('html-webpack-plugin')
使用
const path = require('path')
//插件必须要引入了才可以使用
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
//输出的文件名
filename: 'index.js',
//输出的文件所在地
path: path.resolve(__dirname, 'dist')
},
//模块
module: {
rules: [
// loader的配置
]
},
//在这里使用插件
plugins: [
// plugins的配置
//作用：会默认创建一个空的HTML（没有样式和结构），引入打包输出的所有资源（js/css）
//new HtmlWebpackPlugin()
//需要有结构的HTML文件
new HtmlWebpackPlugin({
//创建（复制）template中的文件，并自动引入打包输出的所有资源（js/css）
template:'./src/index.html'
})
],
//开发模式
mode: 'development'
}
打包图片资源
下载依赖包
npm i url-loader file-loader -D
//url-loader依赖于file-loader
使用
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
//问题：url-loader只处理在样式表（css/less）中使用的图片，默认处理不了html中的img图片
// 处理图片资源
test: /\.(jpg|png|gif)$/,
//只有一个loader，就不需要use
loader: 'url-loader',
options: {
//图片大小小于8kb，就会被base64处理
//优点：减少请求数量（减轻服务器压力），缺点：图片体积会更大（文件请求速度更慢）。对8-12kb进行base64处理
limit: 8 * 1024,
//src=[object Module]问题：url-loader用的是ES6模块的引入，htnl-loader用的是commonjs，所以url-loader解析不了html-loader引入的图片
//解决：关闭url-loader的es6模块化，使用commonjs解析。解析过后，打包后的图片路径就是根据图片内容而形成的唯一的哈希值构成图片路径
esModule: false,
//给图片进行重命名（因为哈希值太长了）
//[hash:10]取图片生成的hash的前10位
//[ext]取文件原来扩展名
name: '[hash:10].[ext]',
// 构建输出到指定的文件下
outputPath: 'imgs'
},
},
{
test: '/\.html$/',
//处理html文件的img图片（只负责引入img，从而能被url-loader进行处理）
//使用的是commonjs模块的引入，当
loader: 'html-loader'
}
]
},
plugins: [
// plugins的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
打包其他资源
其他资源：除了html,css,js资源以外的资源
const path = require('path')
//插件必须要引入了才可以使用
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
//输出的文件名
filename: 'index.js',
//输出的文件所在地
path: path.resolve(__dirname, 'dist')
},
//模块
module: {
rules: [
// loader的配置
{
test:/\.css$/,
use:['style-loader','css-style']
},
//打包其他资源（除了html、js、css资源以外的资源）
{
exclude:/\.(css|js|html)$/,
//这个file-loader在之前和那个url-loader安装了
loader:'file-loader',
options:{
name: '[hash:10].[ext]',
outputPath: 'other'
}
}
]
},
//在这里使用插件
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
//开发模式
mode: 'development'
}
devServer
用来自动编译（打包），自动打开浏览器，自动刷新浏览器
安装
npm i webpack-dev-server -D
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: []
},
plugins: [],
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
port: 3000,
open: true
}
}
|