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コマンドを入力してインストールします.