html-webpack-plugin

如果想要将index.html放入虛拟記憶體中，步驟

1.下載下傳插件 html-webpack-plugin

npm html-webpack-plugin -d
           

1. 在webpack.config.js引入html-webpack-plugin

const htmlWebpackPlugin = require("html-webpack-plugin");
           

1. 建立plugins配置節點

plugins:{
  new htmlWebpackPlugin({
        template: path.join(__dirname,"./dist/index.html"),
        filename:"index.html"
  })
}
           

使用 html-webpack-plugin插件可以将index.html放置在虛拟記憶體中。并且會根據output 的path 屬性 配置正确的bundle.js 路徑 ，不需要我們手動引入路徑

import 導入樣式表

import "路徑"
           

webpack 打包第三方子產品

webpack 隻能處理js檔案

如果需要打包第三方樣式 ，步驟如下

1.安裝style-loader，css-loader

npm install  style-loader css-loader -d
           

1. 在webpack.config.js 中添加配置結點 plugins

module:{}
           

1. 裡面有一個rules屬性

module:{
  rules:[
{ test:"//正規表達式  //\.css$/", use:['style.loader','css.loader']}] 
// 表示第三方子產品比對  正規表達式，若比對成功， 則使用use 裡面的子產品。使用順序， 從右到左
 }