![見出し画像](https://assets.st-note.com/production/uploads/images/27837401/rectangle_large_type_2_fb211048326632f6dc1cb973590efff6.png?width=1200)
【webpack】最低限開発できそうな環境まとめ
webpackを使用した開発環境の構築備忘録です。
内容
・SCSSを使用する
・JSとCSSは別々のファイルで生成する
・autoprefixerを導入する
・autoprefixerの設定には browserslistを使用する
ディレクトリ構造
|-dist
|-node_modules
|-src
|-img
|-js
|-main.js
|-scss
|-style.scss
|-index.html
|-package.json
|-webpack.config.js
手順
# package.json 作成
npm init -y
# webpackのインストール
npm install --save-dev webpack
# webpack-cliのインストール
npm install webpack-cli --save-dev
# PATHを通す
export PATH=$PATH:./node_modules/.bin
# scss
npm i -D webpack webpack-cli sass-loader sass css-loader
# scssを別ファイルとして書き出す
npm i mini-css-extract-plugin
# autoprefixer, postcss-loaderのインストール
npm i -D autoprefixer postcss-loader
# browserslistのインストール
npm i browserslist
# babelのインストール
npm i -D @babel/core @babel/preset-env babel-loader
webpack.config.js(手動で作成)
#webpack .config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// モードの設定
mode: 'development',
// エントリーポイントの設定
entry: './src/js/main.js',
// 出力の設定
output: {
// 出力するファイル名
filename: 'js/[name].bundle.js',
// 出力先のパス
path: path.resolve(__dirname, 'dist'),
},
module: {
// babel-loaderの設定
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
],
exclude: /node_modules/,
},
// SCSSをJSファイルと別々に生成する
{
test: /\.(sc|c|sa)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '/css/[name].css'
})
]
};
package.json
{
"name": "webp_reference",
"version": "1.0.0",
"description": "npm init -y",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"postcss-loader": "^3.0.0",
"sass": "^1.26.8",
"sass-loader": "^8.0.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"mini-css-extract-plugin": "^0.9.0"
}, #browserslistの設定
"browserslist": [
"ie >= 11"
]
}
postcss.config.js(手動で作成)
module.exports = {
plugins: [
require("autoprefixer")({
grid: "autoplace",
}),
],
};
main.js(手動で作成)
import '../scss/style.scss';
いつもJSとCSSファイルを別々で生成する部分で詰まっていたので、そこが解決できてよかったです。
(main.jsの中でSCSSファイルをインポートすることを知らなかった、&
JSの中にSCSSを読み込むことに違和感があったため)
今度は画像の圧縮やHTMLの圧縮まで勉強していこうと思います。
この記事が気に入ったらサポートをしてみませんか?