Node.js html-webpack-pluginの使用
4461 ワード
tml-webpack-plugin
は、メモリに導入されてHTMLページを生成するプラグインである.役割:1.自動的にメモリの中で、指定されたテンプレートページに基づいて、メモリのトップページを生成します.同時に自動的にパッケージされたWindowsをページの底に注入します.自動的に、パッケージされたbundle.jsをページに追加してcnpm i html-webpack-plugin -D
コマンドを使ってインストールします.注:プラグインであれば、必ず
plugins
ノードに入れて取ります.webpack.co.nfig.jsファイル
const path = require('path')
const webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
open: true,
port: 3000,
contentBase: 'src',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), //
filename: 'index.html' //
})
]
}
npm run dev
コマンドでプロジェクトを実行します.注:
cnpm
がインストールされていない場合はnpm install -g cnpm --registry=https://registry.npm.taobao.org
コマンドを入力してインストールします.