如何用webpack实现静态资源拦截替换
1个回答
2016-10-22 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
lugins: [
new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间，通常推到生产环境中才使用
compress:{
warnings: false
}
}),
new htmlWebpackPlugin({ // webpack 指定目录(package内设置)生成静态HTML文件
title: "自动生成网页标题",
filename: "test.html",
template: "temIndex.html",
hash: true, // true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。
inject: true, // | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
chunks: ["app"] // 使用chunks 需要指定entry 入口文件中的哪一个模块
})
]
Installation
使用 npm 安装这个插件
$ npm install html-webpack-plugin@2 --save-dev
Basic Usage
这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有自己的 webpack bundles，只需要在自己的 webpack 配置文件中如下配置：
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
这将会自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间，通常推到生产环境中才使用
compress:{
warnings: false
}
}),
new htmlWebpackPlugin({ // webpack 指定目录(package内设置)生成静态HTML文件
title: "自动生成网页标题",
filename: "test.html",
template: "temIndex.html",
hash: true, // true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值。这对于缓存清除非常有用。
inject: true, // | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
chunks: ["app"] // 使用chunks 需要指定entry 入口文件中的哪一个模块
})
]
Installation
使用 npm 安装这个插件
$ npm install html-webpack-plugin@2 --save-dev
Basic Usage
这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有自己的 webpack bundles，只需要在自己的 webpack 配置文件中如下配置：
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
这将会自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
Storm代理
2023-07-25 广告
StormProxies是一家提供动态代理服务器服务的企业，旨在帮助用户更好地管理网络访问和安全。以下是一些关于StormProxies的IP动态代理服务的特点：1. 高匿名性：StormProxies的动态代理服务器具有高匿名性，可以有效...
点击进入详情页
本回答由Storm代理提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
