webpack html-webpack-plugin
韩单弓
npm init 创建 package.json
npm install --save-dev html-webpack-plugin
生成 package.json
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
{
"name"
:
"html-webpack-plugin-test"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"test.js"
,
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
},
"author"
:
""
,
"license"
:
"ISC"
,
"devDependencies"
: {
"html-webpack-plugin"
:
"^2.30.1"
}
}
|
创建 test.js
|
1
|
console.log(
"this is just a test ..."
);
|
创建 webpack.config.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var
HtmlWebpackPlugin = require(
'html-webpack-plugin'
);
var
path = require(
'path'
);
var
webpackConfig = {
entry:
'./test.js'
,
output: {
path: path.resolve(__dirname,
'./dist'
),
filename:
'index_bundle.js'
},
plugins: [
new
HtmlWebpackPlugin({
title:
"test file"
,
minify:
false
})]
};
module.exports = webpackConfig;
|
执行 webpack --config webpack.config.js
在dist中生成 index.html,index_bundle.js
index.html 如下
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>test file</
title
>
</
head
>
<
body
>
<
script
type
=
"text/javascript"
src
=
"index_bundle.js"
></
script
></
body
>
</
html
>
|
本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/2043919
类似资料：