webpackの設定については、下記リンク先を参照。
https://ajike.github.io/webpack_scss/
http://toushin.konjiki.jp/ というサイトを、Webpack5を使いリニューアルしてみた。package.jsonとwebpack.configの設定でいろいろ考えた結果、下記のようになった。
npmでbootstrap、jqueryは最新版を入れる。bootstrapは4.5.3、jqueryは3.5.1を入れたはずなのに、ChromeのWappalyzerではbootstarpは4.1.3、jqueryは3.3.1と表示される。分からん。
{
"name": "new11",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.0.1",
"css-loader": "^5.0.0",
"postcss": "^8.1.4",
"postcss-loader": "^4.0.4",
"sass": "^1.28.0",
"sass-loader": "^10.0.4",
"style-loader": "^2.0.0",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"bootstrap": "^4.5.3",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
}
}
cssはscssで作る。cssファイルは出力せず、jsとバンドルする設定。
module.exports = {
// メインとなるJavaScriptファイル(エントリーポイント)
entry: `./src/index.js`,
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: `${__dirname}/dist`,
// 出力ファイル名
filename: "main.js",
},
// モード値を production に設定すると最適化された状態で、
// development に設定するとソースマップ有効でJSファイルが出力される
mode: "development",
// ローカル開発用環境を立ち上げる
// 実行時にブラウザが自動的に localhost を開く
devServer: {
contentBase: "dist",
open: true
},
module: {
rules: [
{
// Sassファイルの読み込みとコンパイル
test: /\.(sc|c|sa)ss$/, // 対象となるファイルの拡張子
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
// CSSをバンドルするための機能
{
loader: "css-loader",
options: {
// オプションでCSS内のurl()メソッドの取り込まない
url: false,
// ソースマップの利用有無
sourceMap: true,
// Sass+PostCSSの場合は2を指定
importLoaders: 2,
},
},
// PostCSSのための設定
{
loader: "postcss-loader",
options: {
// PostCSS側でもソースマップを有効にする
sourceMap: true,
postcssOptions: {
// ベンダープレフィックスを自動付与する
plugins: ["autoprefixer"],
},
},
},
// Sassをバンドルするための機能
{
loader: "sass-loader",
options: {
// ソースマップの利用有無
sourceMap: true,
},
},
],
},
],
},
};