webpack的loader
webpack打包图片文件的配置：
const path = require('path')
module.exports = {
mode: "production",
entry: './src/index.js',
output: {
filename: "bundle.js", // 打包后文件名
path: path.resolve(__dirname, 'dist') // 打包放到哪个文件夹下
},
module: {
rules: [{
test: /\.(jpg|png|gif)/, // 匹配打包文件的后缀
use: {
loader: "file-loader", // d打包图片需要的loader，
options: {
// placeholder 占位符
name: '[name].[ext]',// 打包生成图片的命名格式
outputPath: 'images' //打包图片路径
}
}
}]
}
}打包该index.js
var Header = require('./header.js');
var Sidebar = require('./sidebar.js');
var Content = require('./content.js');
const avatar=require('./avatar.jpg');
new Header();
new Sidebar();
new Content();
console.log(avatar)
url-loader打包图片文件
const path = require('path')
module.exports = {
mode: "production",
entry: './src/index.js',
output: {
filename: "bundle.js", // 打包后文件名
path: path.resolve(__dirname, 'dist') // 打包放到哪个文件夹下
},
module: {
rules: [{
test: /\.(jpg|png|gif)/, // 匹配打包文件的后缀
use: {
loader: "url-loader", // 打包图片需要的loader，
options: {
// placeholder 占位符
name: '[name].[ext]',// 打包生成图片的命名格式
outputPath: 'images', //打包图片路径
limit: 2048
}
}
}]
}
}打包css样式
const path = require('path')
module.exports = {
mode: "production",
entry: './src/index.js',
output: {
filename: "bundle.js", // 打包后文件名
path: path.resolve(__dirname, 'dist') // 打包放到哪个文件夹下
},
module: {
rules: [{
test: /\.(jpg|png|gif)/, // 匹配打包文件的后缀
use: {
loader: "url-loader", // d打包图片需要的loader，
options: {
// placeholder 占位符
name: '[name].[ext]',// 打包生成图片的命名格式
outputPath: 'images', //打包图片路径
limit: 2048
}
}
},{
test: /\.(css)/, // 匹配打包文件的后缀
use: ['style-loader', 'css-loader','sass-loader']
}]
}
}打包scss文件
相关文档：https://webpack.js.org/loaders/sass-loader/
npm install sass-loader sass webpack --save-dev
或者
npm install sass-loader node-sass --save-dev
const path = require('path')
module.exports = {
mode: "production",
entry: './src/index.js',
output: {
filename: "bundle.js", // 打包后文件名
path: path.resolve(__dirname, 'dist') // 打包放到哪个文件夹下
},
module: {
rules: [{
test: /\.(jpg|png|gif)/, // 匹配打包文件的后缀
use: {
loader: "url-loader", // d打包图片需要的loader，
options: {
// placeholder 占位符
name: '[name].[ext]',// 打包生成图片的命名格式
outputPath: 'images', //打包图片路径
limit: 2048
}
}
},{
test: /\.(scss)/, // 匹配打包文件的后缀
use: ['style-loader', 'css-loader','sass-loader']
}]
}
}样式属性添加厂商前缀：postcss-loader
https://webpack.js.org/loaders/postcss-loader/
根目录下新建postcss.config.js
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
autoprefixer()
],
};此时webpack.config.js 配置
const path = require('path')
module.exports = {
mode: "production",
entry: './src/index.js',
output: {
filename: "bundle.js", // 打包后文件名
path: path.resolve(__dirname, 'dist') // 打包放到哪个文件夹下
},
module: {
rules: [{
test: /\.(jpg|png|gif)/, // 匹配打包文件的后缀
use: {
loader: "url-loader", // d打包图片需要的loader，
options: {
// placeholder 占位符
name: '[name].[ext]',// 打包生成图片的命名格式
outputPath: 'images', //打包图片路径
limit: 2048
}
}
},{
test: /\.(scss)/, // 匹配打包文件的后缀
use: ['style-loader', 'css-loader','sass-loader','postcss-loader']
}]
}
}css模块化样式
修改css-loader配置
const path = require('path')
module.exports = {
mode: "production",
entry: './src/index.js',
output: {
filename: "bundle.js", // 打包后文件名
path: path.resolve(__dirname, 'dist') // 打包放到哪个文件夹下
},
module: {
rules: [{
test: /\.(jpg|png|gif)/, // 匹配打包文件的后缀
use: {
loader: "url-loader", // d打包图片需要的loader，
options: {
// placeholder 占位符
name: '[name].[ext]',// 打包生成图片的命名格式
outputPath: 'images', //打包图片路径
limit: 2048
}
}
},{
test: /\.(scss)/, // 匹配打包文件的后缀
use: [
'style-loader',
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
}
}要打包的index.js
import avatar from './avatar.jpg';
import style from './index.scss';
var img = new Image();
img.src = avatar;
img.classList.add(style.avatar);
var root = document.getElementById('root');
root.append(img);
