Webpack傻瓜式入门教程-02
2018-03-07 本文已影响0人
liuuuuuu
前言
前两天自学了webpack，发布了一篇入门级的傻瓜式教程，今天下午有点空，就继续学习webpack，看到了loader这个配置，在这里，我将继续一边学习一边发布入门级教程2，有任何不对的地方，希望大佬们指出
上篇教程中我们讲述了如何打包js文件，在这边文章中，我们将继续研究如何打包css？闲话少说，直接开始吧。
目录
https://www.jianshu.com/p/9c9b555b52e8
案例1：css打包
第一步：安装 css-loader 和 style-loader
安装模块
第二步：创建以下文件
test.css
body{
padding: 0;
margin: 0;
}
#container{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background: #ccc;
color: red;
}
test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home-page</title>
</head>
<body>
<div id="container">
123456
</div>
</body>
<script src="/test_bundle.js"></script>
</html>
test.js
import testCss from "test.css";
webpack.config.js
const path = require("path");
module.exports = {
entry: "test.js",
output: {
path: path.resolve(__dirname, "./public"),
filename: "test_bundle.js"
},
module: {
rules:[
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
};
第三步：执行编译如下图所示：
效果图
解析：虽然页面中并没有引入css文件，但是js中引入了css文件，并且在webpack.config.js中进行了css打包配置，所以css文件将会被编译在js文件中，整个页面只用引入一个js文件便可完美运行。
案例2：图片打包
第一步：安装url-loader和file-loader
效果图
第二步：创建以下文件
test.js
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);
var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);
test.html
<body>
<script src="/home_bundle.js"></script>
</body>
webpack.config.js
const path = require("path");
module.exports = {
entry: "./public/javascripts/home.js",
output: {
path: path.resolve(__dirname, "./public"),
filename: "home_bundle.js"
},
module: {
rules:[
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};
第三步：执行编译查看效果如下
项目结构图
网页效果图
解析：webpack.config.js中配置了关于图片的选项，其中limit就是限制图片大小的尺寸，根据设置的尺寸从而重新制作了对应尺寸图片，原理和打包css一致，动态渲染进的html中。
后话
好了，今天就学了2个东西，一个是打包层叠样式表（stylesheet），来一个是打包图片（image）,大家记住了吗？明天看下有没有时间，如果有时间，明天应该会讲述打包plug-ins。若有错误的地方，希望大家指出~谢谢。
说明
原创作品，禁止转载和伪原创，违者必究！
