概要
本当にいまさらながらwebpackでprojectを作ったのでその備忘録です(なんねんまえ?)
webpackというのはみなさんご存じのとおりhtml css jsをひとまとめにしてくれるやつです
似たようなのにgrunt, glupとかもあります
けど今なら正直viteかな
npm init -y
# bootstrap installation
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i --save bootstrap @popperjs/core
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
#jquery installation
npm i --save jquery
my-project/
├── src/
│ ├── js/
│ │ └── main.js
│ ├── scss/
│ │ └── styles.scss
│ └── index.html
├── package-lock.json
├── package.json
└── webpack.config.js
webpack.config.js
'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require('autoprefixer')
module.exports = {
mode: 'development',
entry: './src/js/main.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 8000,
hot: true
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
})
],
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
autoprefixer
]
}
}
},
{
loader: 'sass-loader'
}
]
}
]
}
}
package.json
{
// ...
"scripts": {
"start": "webpack serve",
"build": "webpack build --mode=production",
"test": "echo \"Error: no test specified\" && exit 1"
},
// ...
}