webpack

webpack架設4 - html檔案的打包

second9040

上一篇只有簡單的介紹如何打包，

但是還感覺不出打包不打包的差別，

因為要打開網頁查看畫面還是要去原本的html看。

 

所以如果我想要我的html也被打包起來呢？

如果我想要我的網站server上只有打包的東西呢？

 

可以完成這樣的需求也是打包的好處之一，

別人抄你網站會不容易許多。

因為你的server上就一個除了html之外你自己都不見得看得懂的dist資料夾。

 

透過webpack，可以使用plugin對HTML檔案打包。

安装html-webpack-plugin插件 

npm i -D html-webpack-plugin

 

 

安裝完之後要修改webpack.config.js

 

const htmlWebpackPlugin = require('html-webpack-plugin'); // 宣告使用插件

plugins: [

　new VueLoaderPlugin(),

　new htmlWebpackPlugin({ // 打包HTML

　　template: './index.html', // HTML模板路径

　　favicon: './src/assets/images/favicon.png'
　　//favicon路径(如果你有設定favicon的話，這個屬性就要配置)

    })

]

這邊檔案都是沿用webpack架設3的code
修改後的webpack.config.js

 

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackPlugin = require('html-webpack-plugin'); // 宣告使用插件
var path = require('path')
var config = {
  mode: "development",
  entry: path.join(__dirname, 'src/router', 'router'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: './'
  },
  module: {
    rules: [
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.css$/, loader: ["style-loader", "css-loader"] },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'file-loader',
        options: { name: 'image/[name].[ext]' }
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue: 'vue/dist/vue.js',
      node_modules: __dirname + '/node_modules'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new htmlWebpackPlugin({ // 打包HTML
      template: './index.html' 
    })
  ]
}
module.exports = config

 

到這邊就可以跑npm run build了，

成功之後就可以看到dist裡面出現index.html啦。

然後你可以打開這個在dist裡面的index.html

你會發現多了一行

<script src="./bundle.js"></script>

 
這個bundle.js是dist裡面的

安裝套件之後webpack會自動幫你打包html，

所以原本放在根目錄的index.html裡面的

<script src="./dist/bundle.js"></script>就可以拿掉囉

 

 

 

 

 

參考資料
Webpack轻松入门（四）——HTML打包