这节我们演示如何将components的组件打包进生成的html中。
## 处理模板
### 1.新建文件目录
**layer.html**
~~~html
<div class="layer">
这是layer的内容
</div>
~~~
**layer.css**
~~~css
.layer{
height: 100px;
font-size: 50px;
background-color: red;
}
~~~
**layer.js**
~~~javascript
import layerCss from './layer.css';
import template from './layer.html';
function layer(){
return{
name: 'layer',
layerCss: layerCss,
template: template
}
}
export default layer;
~~~
我们用的ES6的import语法将这个组件的css和html载入js,然后将访问的接口通过export default给出去，方便app.js访问我们这个组件.
**模板index.html**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDemo8</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
~~~
**app.js**
~~~javascript
import Layer from './components/layer/layer';
const App = function(){
let app = document.getElementById('app');
let layer = new Layer();
app.innerHTML = layer.template;
}
new App();
~~~
我们通过ES6的import语法将layer.js导出的layer函数引入，然后用过new Layer()实例化这个函数，然后就可以访问layer内部的变量了，这里是找到id为app的标签，然后将定义的组件html插入id为app的标签里面。
### 2.配置webpack.config
~~~javascript
var path = require("path"); //webpack升级到2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module: {
rules: [{
test: /\.js$/, //用正则匹配找到所有的js文件
include: path.resolve(__dirname, 'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是绝对路径
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是绝对路径
use: [{
loader: 'style-loader'
}, //注意先后顺序，一般都要先用css-loader处理完然后用style-loader生成style标签,但webpack读取的顺序相反
{
loader: 'css-loader'
}
]
},
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.',
})
]
}
~~~
这里除了之前的loader和插件以外，新增了一个[html-loader](https://doc.webpack-china.org/loaders/html-loader/)
这个是将.html文件转为字符串模板,处理模板文件的做法：
①webpack将模板文件当做一个字符串进行处理。(这里使用的作坊)
②webpack将模板文件当成已经编译好的的模板的处理函数。
**安装**
~~~
npm install html-loader --save-dev
~~~
### 3.成功生成，查看html
## 处理ejs模板
在我们的实际项目中，我们的模板会用到模板语法，比如EJS模板，就需要用[ejs-loader](https://www.npmjs.com/package/ejs-loader)进行处理。
### 1.修改组件layer
**layer.html**
~~~html
<div class="layer">
<%= name %>
<% for (var i = 0; i < arr.length ; i++) { %>
<%= arr[i] %>
<% } %>
</div>
~~~
### 2.修改app.js
~~~javascript
import Layer from './components/layer/layer';
const App = function(){
let app = document.getElementById('app');
let layer = new Layer();
app.innerHTML = layer.template({
name: 'ejs模板',
arr: ['1','2','3']
})
}
new App();
~~~
### 3.修改webpack.config
~~~javascript
var path = require("path"); //webpack升级到2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module: {
rules: [{
test: /\.js$/, //用正则匹配找到所有的js文件
include: path.resolve(__dirname, 'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是绝对路径
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是绝对路径
use: [{
loader: 'style-loader'
}, //注意先后顺序，一般都要先用css-loader处理完然后用style-loader生成style标签,但webpack读取的顺序相反
{
loader: 'css-loader'
}
]
},
{
test: /\.html$/,
use: {
loader: 'ejs-loader'
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.',
})
]
}
~~~
只需要把html的loader改成ejs-loader即可。
**安装**
~~~
npm install ejs-loader --save-dev
~~~
### 4.成功生成，查看html
## 处理图片文件
### 1.修改layer.css
~~~css
.layer{
height: 200px;
font-size: 50px;
background-color: red;
background: url('../../assets/background.jpg') no-repeat;
}
~~~
### 2.配置webpack.config
~~~javascript
var path = require("path"); //webpack升级到2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module: {
rules: [{
test: /\.js$/, //用正则匹配找到所有的js文件
include: path.resolve(__dirname, 'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是绝对路径
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是绝对路径
use: [{
loader: 'style-loader'
}, //注意先后顺序，一般都要先用css-loader处理完然后用style-loader生成style标签,但webpack读取的顺序相反
{
loader: 'css-loader'
}
]
},
{
test: /\.html$/,
use: {
loader: 'ejs-loader'
}
},
{
test: /\.(jpg|png|gif|svg)$/,
use:{
loader: 'file-loader?name=assets/[hash].[ext]'
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.',
})
]
}
~~~
添加了[file-loader](https://www.npmjs.com/package/file-loader)
**安装**
~~~
npm install --save-dev file-loader
~~~
### 3.ejs模板中添加图片
~~~javascript
<div class="layer">
<%= name %>
<% for (var i = 0; i < arr.length ; i++) { %>
<%= arr[i] %>
<% } %>
</div>
<img src="${require('../../assets/background.jpg')}"/> <!-- 注意这里使用es6模板语法和require -->
~~~
### 4.成功生成，查看html
## 图片太小与图片太大情况
图片太小：可以直接将图片用base64形式，减少向服务器的请求，借助[url-loader](https://www.npmjs.com/package/url-loader)里面limit参数进行处理。
图片太大：需要压缩一下，这个时候需要[img-loader](https://www.npmjs.com/package/img-loader)
这里就不做演示了，有兴趣的同学可以自己根据官网介绍进行实践尝试。
