使用loader打包静态文件－样式2

// 打包模块不知道该怎么办，就去模块配置里面该怎么办
module: {
　　// 规则
　　rules: [{
　　　　// 假设是以css结尾的，我需要一个load帮助我们去打包
　　　　test: /\.scss$/,
　　　　// 需要两个loader，所以不能是个对象，需要是个数组
　　　　use: [
　　　　　　‘style-loader‘,
　　　　　　‘css-loader‘,
　　　　　　‘sass-loader‘,
　　　　　　‘postcss-loader‘
　　　　]
　　}]
},

// 打包模块不知道该怎么办，就去模块配置里面该怎么办
module: {
　　// 规则
　　rules: [{
　　　　// 假设是以css结尾的，我需要一个load帮助我们去打包
　　　　test: /\.scss$/,
　　　　// 需要两个loader，所以不能是个对象，需要是个数组
　　　　use: [
　　　　　　‘style-loader‘,
　　　　　　{
　　　　　　　　loader: ‘css-loader‘,
　　　　　　　　options: {
　　　　　　　　　　importLoaders: 2
　　　　　　　　}
　　　　　　},
　　　　　　‘sass-loader‘,
　　　　　　‘postcss-loader‘
　　　　]
　　}]
},

@import ‘./avatar.scss‘;

body{
　　.avatar {
　　　　width: 150px;
　　　　height: 150px;
　　　　transform: translate(100px, 100px)
　　}
}

import avatar from ‘./avatar.jpg‘;

function createAvatar() {
　　var img = new Image();
　　img.src = avatar;
　　img.classList.add(‘avatar‘);

　　var root = document.getElementById(‘root‘);
　　root.appendChild(img);
}

export default createAvatar;

import avatar from ‘./avatar.jpg‘;
import ‘./index.scss‘;
import createAvatar from ‘./createAvatar‘;

createAvatar();

var img = new Image();
img.src = avatar;
img.classList.add(‘avatar‘);

var root = document.getElementById(‘root‘);
root.appendChild(img);

// 需要两个loader，所以不能是个对象，需要是个数组
use: [
　　‘style-loader‘,
　　{
　　　　loader: ‘css-loader‘,
　　　　options: {
　　　　　　importLoaders: 2,
　　　　　　modules: true
　　　　}
　　},
　　‘sass-loader‘,
　　‘postcss-loader‘
]

import avatar from ‘./avatar.jpg‘;
import style from ‘./index.scss‘;
import createAvatar from ‘./createAvatar‘;

createAvatar();

var img = new Image();
img.src = avatar;
img.classList.add(style.avatar);

var root = document.getElementById(‘root‘);
root.appendChild(img);

import avatar from ‘./avatar.jpg‘;
import style from ‘./index.scss‘;

function createAvatar() {
　　var img = new Image();
　　img.src = avatar;
　　img.classList.add(style.avatar);

　　var root = document.getElementById(‘root‘);
　　root.appendChild(img);
}

export default createAvatar;

var root = document.getElementById(‘root‘);
import ‘./index.scss‘;

root.innerHTML = ‘<div class="iconfont iconfangdajing">abc</div>‘;

@font-face {font-family: "iconfont";
　　src: url(‘./font/iconfont.eot?t=1555804223122‘); /* IE9 */
　　src: url(‘./font/iconfont.eot?t=1555804223122#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
　　url(‘data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASYAAsAAAAACSgAAARLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFSIRjATYCJAMUCwwABCAFhG0HRRvsB8gehXEbHUKqr74VirOKgNrvtydP5j7iSZJq9+kkQsQThEJo0AKdUkSzl/DPctrYLiZcQvcIkgKDoUCBteuSI8cHnPSAfsDwA8IXICcBAsD+uHf6V+eBzWdZLmMu25uKBmA0gQIaY3IBZekAKeeW4bWL1WEeJ6CYNAJ2UFhOgZcMjwsIlwJvAq+ETq4gB62yLliaIdyBuzbOxi/h1vt8+LeRF4iqBHjq4XGBFbK//F7WEA6XQ7ODAH84C4RVJCwBmXBVaLtEBIElhKL9zs0OULSi+DXyPPB54ssalwtdtCFFIUGiPMyfF2rAsh4g7QQzX34Wk8hXIK9InghMEj81gmuRVc6Sgn58grACWDHuyeKB36IZ1AeovLz8lVrCN1ytVYyhDt+Gx1sURtHY3RfWeYdh4nGO2zXskTtyLow7PnoXu/PMFPS8fZueezcLLZy73Tk+n8Nych7uzh2tglFRii5lQ+OiCMWKoHrTQeVcgBIUx8qcK5iTZZ2KOen0gS3g2KqcexLD2DkBiwLZxZv96YVL/KgFLMU2zVnkDGS3zx260LGgRDJHldZLPn6xMyAzrrcu4Khz/TMWOqRdgGRxhF3SF+Qt3Oi/MWTRtm2bAjYFL9zaoiveTb/Q37Hgz6GGhntGew4+88CBmXj2FPxS9mG3v3/dDjflrf3Tl6h0NZoKaXtqNC1DxCx8/smT8wnCdjj2tvNOnpqPZ9mG3tZolobEhSQ8+k5M2717GhITYMWn4RHHZcMzwDGu6PqQ/OtI4zLn3enMrKLxXLOQedftT6ZdPp1sxNxzDOJQRlC3KMuyU5+2svLFYP8/IQM/DYyAs2qvQj7EOD2lgGdoPnfBDGNUjDOyoT6SKfScrco/ezYqNiZftTQwLwleInePz2j0WKLO//qZ1jGXLB/68CVPZXb58PndiH+XXMP+f0PaB7ldtpidp56ljl9C8Rd3rqlOGOq1aKWbHR/iGfek7mHEQ3amxnMJJAN0j6djKcdDXSiEnqZ9BP4Dfcf9rU9imzb9m5fSDeD10fUsKOg6MqQbgL9ArjH/d+E3LMu6EOurrBZbPDVUOeV5a7laXcFP4hpyfxjHKIgsQSvyAaLGBCStKTSTlqDSsQW11jYUi4pWdwyTEEL2BhZMRxAM2A1RnwdIBlxGM+keVMa8g9pABBRHwXfLjpkERZ6ETDKykuZxpGARezlqlBV+ei3iR3WbpLjQozBIsgtuMsYQnQ4XoV4kDTHDPpqPlWWO5CSxhyxEp6HubpG0SWInssiGDlm2pRqNXNGdDBaxBxT2SRATGWJFMhuHJLAQ9eKc2jJF5v21EN4o3UykipIaKwOR2Amdk2IYRDdAi2S9jUoupbfdaLxYMhnHjuJIRD1IhWBBuklARLIVD+qEWMgMOjr4bFIZmWpcU5lhekXPPW6DAl9RBRwjMDfMHfOAfG0TehWcqZe3mjoFJw/PMeFmAQAA‘) format(‘woff2‘),
　　url(‘./font/iconfont.woff?t=1555804223122‘) format(‘woff‘),
　　url(‘./font/iconfont.ttf?t=1555804223122‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
　　url(‘./font/iconfont.svg?t=1555804223122#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}

.iconfont {
　　font-family: "iconfont" !important;
　　font-size: 16px;
　　font-style: normal;
　　-webkit-font-smoothing: antialiased;
　　-moz-osx-font-smoothing: grayscale;
}

.iconspin:before {
　　content: "\e851";
}

.iconfangdajing:before {
　　content: "\e614";
}

.iconAa:before {
　　content: "\e636";
}

.iconbi:before {
　　content: "\e617";
}

module: {
　　rules: [{
　　　　test: /\.eot|ttf|svg|woff$/,
　　　　use: {
　　　　　　loader: ‘file-loader‘
　　　　}
　　}]
},