技術力のなさを自ら露呈していくスタイル。
今回のお題は
PugでHTMLを変換するだけのWebpack4を作りたかった
これです。それ以外の一切は行いません。
環境
{
"name": "app_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devb": "webpack --mode=development",
"prob": "webpack --mode=production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}
期待する動作
- index.pugがmain.htmlにトランスパイルされる。
- jsは生成されない 重要
- main.htmlの中でwebpackが生成したjsをリンクしない 重要
実装
下記のコードはjsが生成されてしまいます・・・。
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require("path")
module.exports = {
entry : './src/index.pug',
output:{
path: path.resolve(__dirname,'./このフォルダは不要'),
},
module: {
rules: [
{
test: /\.pug$/,
exclude: /node_modules/,
loader: ['html-loader', 'pug-plain-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.pug',
filename: "../main.html"
})
]
}
追記(2018/12/20)
結局Gulpで解決しました。Gulpの方が気持ちシンプルに見えるのでいいかもですね。