如何在頁(yè)面中內(nèi)嵌js文件
html-webpack-plugin本身不支持此功能，但是提供了相關(guān)的實(shí)現(xiàn)方式
通過(guò)webpack暴露出來(lái)的Compilation.assets[]獲取到經(jīng)過(guò)webpack編譯后的chunks文件對(duì)象，然后輸出到頁(yè)面中，Compilation.asserts屬性是不包含publicPath的路徑
index.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
<%= htmlWebpackPlugin.options.title %> </title></head><body>
<h1>
<%= htmlWebpackPlugin.options.date %> </h1>
<script><%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></script></body></html>
注意，此時(shí)由于inject不為true,所以內(nèi)嵌的chunks文件會(huì)被再次插入到文檔中，所以需要修改webpack.config.js,設(shè)置inject為false，手動(dòng)引入其他文件
webpack.config.js
//引入插件const htmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.exports = {
//配置入口文件
entry: {
home: './src/js/home.js',
list: './src/js/list.js',
detail: './src/js/detail.js',
hello: './src/js/hello.js',
main: './src/js/main.js'
},
//配置輸出項(xiàng)
output: {
//設(shè)置輸出路徑
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-[chunkhash].min.js',
publicPath: '//static.w3csky.com/'
},
//配置插件
plugins: [
new htmlWebpackPlugin({
//設(shè)置生成文件
filename: 'index.html',
//設(shè)置html模板文件
template: 'index.html',
//指定script標(biāo)簽注入位置
inject: false,
title: 'webpack pass params',
date: new Date(),
minify: {
//是否刪除注釋
removeComments: true,
//是否刪除空格
collapseWhitespace: true
},
//手動(dòng)指定當(dāng)前適用的chunks
//chunks: ['home', 'list', 'detail']
//指定被排除的chunks文件
excludeChunks: ['hello'],
}),
new htmlWebpackPlugin({
//設(shè)置生成文件
filename: 'list.html',
//設(shè)置html模板文件
template: 'index.html',
//指定script標(biāo)簽注入位置
inject: false,
title: 'list page',
date: new Date(),
//手動(dòng)指定當(dāng)前適用的chunks
//chunks: ['list']
//指定被排除的chunks文件
excludeChunks: ['hello', 'home', 'detail'],
}),
new htmlWebpackPlugin({
//設(shè)置生成文件
filename: 'detail.html',
//設(shè)置html模板文件
template: 'index.html',
//指定script標(biāo)簽注入位置
inject: false,
title: 'detail page',
date: new Date(),
//手動(dòng)指定當(dāng)前適用的chunks
//chunks: ['detail']
//指定被排除的chunks文件
excludeChunks: ['hello', 'home', 'list'],
}),
]}
index.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
<%= htmlWebpackPlugin.options.title %> </title></head><body>
<h1>
<%= htmlWebpackPlugin.options.date %> </h1>
<script><%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></script>
<% for(var k in htmlWebpackPlugin.files.chunks){ %> <% if(k!=='main'){ %>
<script src="<%=htmlWebpackPlugin.files.chunks[k].entry %>"></script>
<% } %> <% } %></body></html>
babel-loader安裝及配置
https://github.com/babel/babel-loader
npm install --save-dev babel-loader babel-core
npm install babel-preset-env --save-dev
webpack.config.js
//引入插件const htmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.exports = {
//配置入口文件
entry: './src/js/app.js',
//配置輸出項(xiàng)
output: {
//設(shè)置輸出路徑
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[hash].min.js',
},
module: {
//配置module rules
rules: [
//配置babel-loader支持ES678
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
//配置loader參數(shù)
query: {
presets: ['es2015'],
},
}],
//需要處理的目錄
include: ['./src/'],
//排除的目錄
exclude: [path.resolve(__dirname, 'node_modules')]
}
]
},
//配置插件
plugins: [
new htmlWebpackPlugin({
//設(shè)置生成文件
filename: 'app.html',
//設(shè)置html模板文件
template: 'app.html',
//指定script標(biāo)簽注入位置
inject: 'body'
}),
]}
app.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
</title></head><body>
<h1>
bable loader demo </h1></body></html>
app.js
import layer from '../components/layer/layer.js';const App = () => {
console.log(layer);}new App();
layer.js
//import tpl from './layer.html';function layer() {
return {
name: 'layer',
tpl: tpl }}export default layer;
layer.html
<div class="layer">
<div>this is a layer</div></div>
layer.css
.layer {
width: 600px;
height: 300px;
background-color: green;}.layer>div {
width: 400px;
height: 240px;
background-color: red;}
