如何在页面中内嵌js文件
html-webpack-plugin本身不支持此功能，但是提供了相关的实现方式
通过webpack暴露出来的Compilation.assets[]获取到经过webpack编译后的chunks文件对象，然后输出到页面中，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>
注意，此时由于inject不为true,所以内嵌的chunks文件会被再次插入到文档中，所以需要修改webpack.config.js,设置inject为false，手动引入其他文件
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'
},
//配置输出项
output: {
//设置输出路径
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-[chunkhash].min.js',
publicPath: '//static.w3csky.com/'
},
//配置插件
plugins: [
new htmlWebpackPlugin({
//设置生成文件
filename: 'index.html',
//设置html模板文件
template: 'index.html',
//指定script标签注入位置
inject: false,
title: 'webpack pass params',
date: new Date(),
minify: {
//是否删除注释
removeComments: true,
//是否删除空格
collapseWhitespace: true
},
//手动指定当前适用的chunks
//chunks: ['home', 'list', 'detail']
//指定被排除的chunks文件
excludeChunks: ['hello'],
}),
new htmlWebpackPlugin({
//设置生成文件
filename: 'list.html',
//设置html模板文件
template: 'index.html',
//指定script标签注入位置
inject: false,
title: 'list page',
date: new Date(),
//手动指定当前适用的chunks
//chunks: ['list']
//指定被排除的chunks文件
excludeChunks: ['hello', 'home', 'detail'],
}),
new htmlWebpackPlugin({
//设置生成文件
filename: 'detail.html',
//设置html模板文件
template: 'index.html',
//指定script标签注入位置
inject: false,
title: 'detail page',
date: new Date(),
//手动指定当前适用的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',
//配置输出项
output: {
//设置输出路径
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参数
query: {
presets: ['es2015'],
},
}],
//需要处理的目录
include: ['./src/'],
//排除的目录
exclude: [path.resolve(__dirname, 'node_modules')]
}
]
},
//配置插件
plugins: [
new htmlWebpackPlugin({
//设置生成文件
filename: 'app.html',
//设置html模板文件
template: 'app.html',
//指定script标签注入位置
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;}
网友评论