webpack メモ
お母ちゃん
2019.10.26
今までGulpを使っていたけど 初めて webpack を立ち上げてみたのでメモ。
とりあえず、下記のところまでは出来た。
・webpackでsassをコンパイル、cssファイルに書き出す
・webpack-dev-server でファイルを監視しコンパイルとリロード
目次
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "name": "package", "version": "1.0.0", "dependencies": { "node-sass": "^4.12.0", }, "devDependencies": { "autoprefixer": "^9.7.0", "css-loader": "^3.2.0", "mini-css-extract-plugin": "^0.8.0", "sass-loader": "^8.0.0", "style-loader": "^1.0.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.9.0" }, "scripts": { "build": "NODE_ENV=production webpack", "dev": "NODE_ENV=development webpack", "start": "webpack-dev-server" }, "author": "", "license": "ISC", "description": "" } |
webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
const path = require('path'); const enabledSourceMap = process.env.NODE_ENV === 'development'; const isProduction = process.env.NODE_ENV === 'production'; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: isProduction ? 'production':'development', output: { path: path.resolve(__dirname, 'public/common/js'), publicPath: '/common/js/', filename: 'script.js', }, module: { rules: [ { test: /\.scss/, use: [ isProduction ? MiniCssExtractPlugin.loader : 'style-loader', { loader: "css-loader", options: { url: false, sourceMap: enabledSourceMap } }, { loader: 'sass-loader', options: { sourceMap: enabledSourceMap, } } ] } ] }, devServer: { open: true, contentBase: path.join(__dirname, 'public'), watchContentBase: true, }, plugins: [ new MiniCssExtractPlugin({ filename: '../css/styles.css', }), ], }; |
index.js
|
1 2 3 4 5 6 |
// JS import { sub } from "./js/sub"; sub(); // CSS import './css/styles.scss'; |
ファイル構成
node_modules
package-lock.json
package.json
public
- index.html
src
- css
- js
- index.js
実行
npm start
webpack-dev-server の起動
npm run build
webpack の実行
まだ設定が必要になるところは増えそうだけど
とりあえず最低限SASSコーディング環境までは立ち上げ出来た感じだろうか…
