标签：02 index plugin loader webpack html 工程化 js
前端工程化学习笔记-02(webpack基础用法)
webpack基础用法
快速搭建一个简易的webpack项目
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
# 删除"main": "index.js",修改"scripts"
{
"name": "webpack_study",
"version": "1.0.0",
"description": "webpack基础用法",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4"
}
}
function component() {
const element = document.createElement('div');
element.innerHTML = "Hello Webpack";
return element;
}
document.body.appendChild(component());
const path = require('path');
module.exports = {
// 入口(entry)
entry: './src/index.js',
// 输出(output)
output: {
// 指定输出文件名
filename: 'main.js',
// 指定输出目录
path: path.resolve(__dirname, 'dist'),
},
// 告知webpack使用相应模式的内置优化
// mode配置选项:'none' | 'development' | 'production'
// 如果没有设置，webpack会给mode的默认值设置为production
mode: 'development',
};
npm run build
- 在生成的dist文件夹下面新增一个index.html文件并引入main.js；；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速搭建一个简易的webpack项目</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
loader的使用方法
- 使用sass-loader、css-loader、style-loader处理Sass样式文件
# 安装loader
npm install css-loader style-loader sass sass-loader --save-dev
# webpack.config.js中使用loader
// 多个loader作用一个模块需要用数组形式且要注意顺序，自后往前
// webpack自定义loader规范：一个loader最好制作一件事
module: {
rules:[
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
]
}
]
}
# 新增src/styles/index.scss文件
body {
background:gray;
text-align: center;
font-size: 24px;
color:#fff;
}
# 安装loader
npm install file-loader url-loader --save-dev
# webpack.config.js中使用loader
module: {
rules:[
...
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称 [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
// 小于 100 字节转成 base64 格式
limit: 100
}
}
}
]
}
# 修改src/index.js
import "./styles/index.scss"
import wepack_logo from "./images/webpack.jpg"
function divComponent() {
const element = document.createElement('div');
element.innerHTML = "Hello Webpack";
return element;
}
function imgComponent() {
const element = document.createElement('img');
element.src = wepack_logo;
return element;
}
document.body.appendChild(divComponent());
document.body.appendChild(imgComponent());
plugin的使用方法
- 使用HtmlWebpackPlugin，⾃动生成⼀个html文件，并把打包生成的js模块引⼊到该html中
# 安装plugin
npm install file-loader url-loader --save-dev
# webpack.config.js中使用plugin
// 引入plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 配置plugin
plugins: [new HtmlWebpackPlugin({
title: "webpack 应用",
filename: "index.html",
template: "./public/index.html"
})
],
# 删除dist下的index.html,新增public文件夹,在文件夹中新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>webpack 应用</title>
<script defer src="main.js"></script></head>
<body>
</body>
</html>
- 使用clean-webpack-plugin, 删除（清理）构建目录
# 安装plugin
npm install --save-dev clean-webpack-plugin
# webpack.config.js中使用plugin
// 引入plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 配置plugin
plugins: [
...
new CleanWebpackPlugin(),
...
],
- 使用mini-css-extract-plugin, 将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
# 安装plugin
npm install --save-dev mini-css-extract-plugin
# webpack.config.js中使用plugin
// 引入plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 配置loader
module: {
rules:[
...
{
test: /\.s?css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
]
},
...
]
}
// 配置plugin
plugins: [
...,
new MiniCssExtractPlugin({
filename: '[name].css'
}),
...
]
项目源码
|--- webpack-demo
|--- node_modules
|--- public
|--- index.html
|---src
|--- images
|--- webpack.png
|--- styles
|--- index.scss
|--- index.js
|--- package.json
|--- webpack.config.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
</body>
</html>
body {
background:gray;
text-align: center;
font-size: 24px;
color:#fff;
}
import "./styles/index.scss"
import wepack_logo from "./images/webpack.jpg"
function divComponent() {
const element = document.createElement('div');
element.innerHTML = "Hello Webpack";
return element;
}
function imgComponent() {
const element = document.createElement('img');
element.src = wepack_logo;
return element;
}
document.body.appendChild(divComponent());
document.body.appendChild(imgComponent());
{
"name": "webpack_study",
"version": "1.0.0",
"description": "webpack基础用法",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^7.1.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.0",
"mini-css-extract-plugin": "^2.9.1",
"sass": "^1.78.0",
"sass-loader": "^16.0.1",
"style-loader": "^4.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4"
}
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// 入口(entry)
entry: './src/index.js',
// 输出(output)
output: {
// 指定输出文件名
filename: 'main.js',
// 指定输出目录
path: path.resolve(__dirname, 'dist'),
},
// 告知webpack使用相应模式的内置优化
// mode配置选项:'none' | 'development' | 'production'
// 如果没有设置，webpack会给mode的默认值设置为production
mode: 'development',
// 多个loader作用一个模块需要用数组形式且要注意顺序，自后往前
// webpack自定义loader规范：一个loader最好制作一件事
module: {
rules:[
{
test: /\.s?css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称 [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
// 小于 100 字节转成 base64 格式
limit: 100
}
}
}
]
},
plugins: [new HtmlWebpackPlugin({
title: "webpack 应用",
filename: "index.html",
template: "./public/index.html"
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
],
};
标签：02,
index,
plugin,
loader,
webpack,
html,
工程化,
js
From： https://blog.csdn.net/weixin_41016739/article/details/142301473