這節我們演示如何將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)
這里就不做演示了，有興趣的同學可以自己根據官網介紹進行實踐嘗試。
