🦔
/distと/srcのファイル名・フォルダ名を一致させ、メンテナンス性を高める
作成日:
2022/01/03
2
出力先・出力ファイル名を変更する
現在の階層構造は下記の通り
webpack-tutorial
├dist/
| ├──bundle.js
| ├──index.html
| └──main.css
|
├node_modules/
├src/
| ├──images/
| ├──index.js
| ├──style.scss
| └──sub.js
|
├package-lock.json
├package.json
└webpack.config.js
出力先・出力ファイル名を変えるには、webpack-config.jsを変更する。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: `${__dirname}/dist`,
//ここから変更
filename: './js/bundle.js'
//ここまで変更
},
mode: 'development',
module: {
rules: [
{
test: /\.(css|sass|scss)/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpg|gif|svg)/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
]
}
]
},
plugins: [
//ここから変更
new MiniCssExtractPlugin({
filename: './css/style.css'
}),
//ここまで変更
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
}
webpackを起動すると分かるが、これにより、dist/内に出力されるHTMLのCSS・JS参照先も自動的に書き変わる。
build後の階層構造
webpack-tutorial
├dist/
| ├──css/
| | └──style.css
| ├──js/
| | └──bundle.js
| └──index.html
|
├node_modules/
├src/
| ├──images/
| ├──index.js
| ├──style.scss
| └──sub.js
|
├package-lock.json
├package.json
└webpack.config.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 参照先が自動的に書き変わっている -->
<script defer src="./js/bundle.js"></script><link href="./css/style.css" rel="stylesheet"></head>
<body>
<h1>webpackチュートリアル<span>(SCSSを追加)</span></h1>
<img src="/src/images/mountain.jpg" alt="">
<img src="/src/images/sea.jpg" alt="">
</body>
</html>
src/配下の構成も変更する
現在はwebpack-config.jsを見ないと、どのsrc/配下ファイルがdist/配下ファイルに対応しているかが分からない。
これだと効率が悪いので、ひと目見て分かるように、dist/配下に合わせる。
変更後
webpack-tutorial
├dist/
| ├──css/
| | └──style.css
| ├──js/
| | └──bundle.js
| └──index.html
|
├node_modules/
├src/
| ├──images/
| ├──js/
| | ├──index.js
| | └──sub.js
| ├──scss/
| | └──style.scss
| └──templates/
| └──index.html
|
├package-lock.json
├package.json
└webpack.config.js
この状態でwebpackを起動するとエラーが出る。
src/配下のフォルダ構成が変わったことにより、参照先が変わったためで、これらを変更する必要がある。
エントリーポイントのJSファイルの参照先
//webpack-config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
//ここから変更
entry: './src/js/index.js',
//ここまで変更
output: {
path: `${__dirname}/dist`,
filename: './js/bundle.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.(css|sass|scss)/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpg|gif|svg)/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './css/style.css'
}),
new HtmlWebpackPlugin({
//ここから変更
template: './src/templates/index.html'
//ここまで変更
}),
new CleanWebpackPlugin()
]
}
エントリーポイントで指定しているscssの参照先
import { hello } from './sub.js'
//ここから変更
import '../scss/style.scss'
//ここまで変更
hello('hello world');
エラー解消のポイントは、一つ一つ読み解いて対応する
↓だったら、「index.htmlが見つかりません」 = 指定先が間違っている
ERROR in Error: Child compilation failed: Module not found: Error: Can't resolve '/Users/yu/Desktop/webpack-tutorial2/src/index.html' in '/Users/yu/Desktop/webpack-tutorial2' ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/yu/Desktop/webpack-tutorial2/src/index.html' in '/Users/yu/Desktop/webpack-tutorial2'
webpackを起動
ブラウザで確認
事業会社にてコーダーをしています。制作は6年目。
インプットしたことをアウトプットしています。