内容简介：新建一个文件夹
新建一个文件夹
yarn init
初始化一下
yarn add webpack
使用
编写 webpack.config.js
文件
const path = require(‘path’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports = {
entry: path.resolve(__dirname, ‘index.js’),
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘index.js’
},
plugins: [
new HtmlWebpackPlugin()
]
}
config 里用到了 html-webpack-plugin
，所以别忘了 yarn add html-webpack-plugin
config 作用很明确，就是把 entry 输出到 output 配置的位置
在 plugins
里，我们添加了一个 HtmlWebpackPlugin
，它会把 webpack 生成的 bundles 塞到一个 HTML 文件里
执行 webpack --config webpack.config.js
最终在 dist 下不仅有 index.js 文件，还会有一个 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”></head>
<body>
<script type=“text/javascript” src=“index.js”></script></body>
</html>
配置
可以为 htmlWebpackPlugin 添加一些配置
new HtmlWebpackPlugin({
favicon: ‘./favicon.ico’,
title: ‘Webpack1’
})
我们为其生成的 HTML 指定了 favicon 及 title
生成的 HTML 如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Webpack1</title>
<link rel=“shortcut icon” href=“favicon.ico”></head>
<body>
<script type=“text/javascript” src=“index.js”></script></body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
鳥哥的Linux私房菜（第四版）
鳥哥 / 碁峰資訊股份有限公司 / 2016-1-25 / TWD 980.00
本書前三版均蟬聯電腦專業書籍Linux暢銷排行榜Top1，為地表最暢銷的Linux中文書籍！ 您是有意學習Linux的小菜鳥，卻不知如何下手？您是遨遊Linux的老鳥，想要一本資料豐富的工具書？本書絕對是最佳選擇！ ※鳥哥傾囊相授，內容由淺入深 書中包含了鳥哥從完全不懂Linux到現在的所有歷程，鳥哥將這幾年來的所知所學傾囊相授，以最淺顯易懂的文字帶領您進入Linux的世界。 ......一起来看看 《鳥哥的Linux私房菜（第四版）》 这本书的介绍吧!
