处理css文件
总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件
index.js
import './index.css';
index.css
body {
background-color: red;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>处理 CSS 文件</title>
</head>
<body></body>
</html>
webpack.config.js
entry默认是main
html-webpack-plugin插件是为了方便以什么为模板然后生成文件并且引入对应的js和css文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
// loader: 'css-loader'
// use: ['style-loader', 'css-loader']
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
};
在没有配置css-loader时，npm run webpack出现以下情况
配置好css-loader之后，npm run webpack就成功通过了
有css-loader还不够，还需要安装style-loader，最后网页才能呈现样式
注意：上面图webpack.config.js中use后面可以是对象也可以是数组执行顺序从右往左
但是呢，我们通常都是link导入样式表文件，而不是直接style，因此我们需要安装插件mini-css-extract-plugin,之后配置插件filename指定哪个目录下（在上面output属性目录前提下）
注意：安装开发依赖npm install --save-dev 插件名字@版本号
package.json
{
"name": "webpack-css",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.1.1",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
npm run webpack后生成dist目录下有index.html、main.js和css目录下的main.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>处理 CSS 文件</title>
<link href="css/main.css" rel="stylesheet"></head>
<body><script src="main.js"></script></body>
</html>
使用file-loader处理CSS图片中的图片
总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用 file-loader 处理 CSS 文件中的图片</title>
</head>
<body>
<script>
// npm install
// 如果是外部的资源，是不需要考虑 webpack 的，只有本地的图片才需要被 webpack 处理
// file-loader
// npm install --save-dev file-loader@6.0.0
</script>
</body>
</html>
index.css
body {
/* background-image: url(https://www.imooc.com/static/img/index/logo.png); */
background-image: url(img/logo.png);
background-repeat: no-repeat;
}
index.js
import './index.css';
console.log('index');
package.json
{
"name": "webpack-css-img",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.1.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js（注意比上次文件增加的内容）
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
};
继npm install和npm run webpack之后生成以下这样目录
dist目录下的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用 file-loader 处理 CSS 文件中的图片</title>
<link href="css/main.css" rel="stylesheet"></head>
<body>
<script>
// npm install
// 如果是外部的资源，是不需要考虑 webpack 的，只有本地的图片才需要被 webpack 处理
// file-loader
// npm install --save-dev file-loader@6.0.0
</script>
<script src="main.js"></script></body>
</html>
main.css
body {
/* background-image: url(https://www.imooc.com/static/img/index/logo.png); */
background-image: url(../img/logo.png);
background-repeat: no-repeat;
}
使用html-withimg-loader处理HTML中的图片
总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用 html-withimg-loader 处理 HTML 中的图片</title>
</head>
<body>
<img src="./src/img/logo.png" alt="" />
<script>
// npm install --save-dev html-withimg-loader@0.1.16
</script>
</body>
</html>
index.css
body {
background-color: yellow;
/* background-image: url(); */
}
index.js
import './index.css';
console.log('index');
package.json
{
"name": "webpack-html-img",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.1.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"html-withimg-loader": "^0.1.16",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js（注意比上次文件增加的内容）
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]',
esModule: false
}
}
},
{
test: /\.(htm|html)$/,
loader: 'html-withimg-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
};
继npm install和npm run webpack之后生成以下这样目录
dist目录下的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>使用 html-withimg-loader 处理 HTML 中的图片</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body><img src="img/logo.png" alt=""/>
<script> // npm install --save-dev html-withimg-loader@0.1.16 </script>
<script src="main.js"></script>
</body>
</html>
使用file-loader处理js中的图片
总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用 file-loader 处理 JS 中的图片</title>
</head>
<body>
<script>
// file-loader css img
// html-withimg-loader html img
// file-loader js img
</script>
</body>
</html>
index.css
body {
background-color: yellow;
}
index.js
import './index.css';
import img from './img/logo.png';
console.log(img);//打发dist目录下的路径dist 看起来跟原来路径一样，实际上过程不同
const imgEl = document.createElement('img');
imgEl.src = img;
document.body.appendChild(imgEl);
package.json
{
"name": "webpack-js-img",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.1.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js（注意比上次文件增加的内容）
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'imgsss/[name].[ext]',
esModule: false
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
};
继npm install和npm run webpack之后生成以下这样目录
dist目录下的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用 file-loader 处理 JS 中的图片</title>
<link href="css/main.css" rel="stylesheet"></head>
<body>
<script>
// file-loader css img
// html-withimg-loader html img
// file-loader js img
</script>
<script src="main.js"></script></body>
</html>
使用url-loader处理图片
总共有src目录下的index.css和index.js、同根的index.html和webpack.config.js文件、src目录下的img目录下logo.png，然后npm init之后生成package.json文件，npm install后生成package-lock.json文件，最后npm run webpack之后有dist目录下各种文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用 url-loader 处理图片</title>
</head>
<body>
<script>
// file-loader css img
// html-withimg-loader html img
// file-loader js img
// npm install --save-dev url-loader@4.1.0
</script>
</body>
</html>
index.css
body {
background-color: yellow;
}
index.js
import './index.css';
import img from './img/logo.png';
console.log(img);
const imgEl = document.createElement('img');
imgEl.src = img;
// base64
document.body.appendChild(imgEl);
package.json
{
"name": "webpack-url-loader",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.1.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js（注意比上次文件增加的内容）
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: 'img/[name].[ext]',
esModule: false,
// 图片是4k多，如果限制在3000，会以路径形式显示 如果限制在10000，会以base64显示
limit: 3000
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
};
继npm install和npm run webpack之后生成以下这样目录
dist目录下的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用 url-loader 处理图片</title>
<link href="css/main.css" rel="stylesheet"></head>
<body>
<script>
// file-loader css img
// html-withimg-loader html img
// file-loader js img
// npm install --save-dev url-loader@4.1.0
</script>
<script src="main.js"></script></body>
</html>
限制3000情况下
限制10000情况下
