最近webpackを勉強し始めたのですが、
WordPressのテーマ作成時にwebpack-dev-serverで
自動リロードしながら作業することは出来るでしょうか?
的外れなことを言っていたらすみません、よろしくお願いします。
実現したいこと(追記)
すみません、きっかけはこの記事を見たことです。
http://kojika17.com/2014/05/livereload-for-wordpress.html
これと同じことがwebpackでも出来ないかと思い質問させていただきました。
おそらくwebpack.config.jsで設定するのかと思いましたが
書き方が分からず、index.phpも表示されない状態です。
ディレクトリ構成図
site/
├ package.json
├ webpack.config.js
├ dist/
│ └ index.php
│ └ js/
│ └ main.js
├ src/
│ └ index.js
│ └ style.scss
└ node_modules/
webpack.config.js
JavaScript
1const MODE = 'development'; 2const enabledSourceMap = (MODE === 'development'); 3 4 5 6module.exports = { 7 8 //エントリーポイント 9 entry: `./src/index.js`, 10 11 //ファイルの出力設定 12 output: { 13 path: `${__dirname}/dist/js`, 14 publicPath: '/js/', 15 filename: 'main.js' 16 }, 17 18 //ローカル開発用環境 19 devServer: { 20 contentBase: 'dist', 21 open: true, 22 port: 8080, 23 watchContentBase: true 24 }, 25 26 mode: MODE, 27 module: { 28 rules: [ 29 { 30 test: /.scss/, 31 use: [ 32 'style-loader', 33 { 34 loader: 'css-loader', 35 options: { 36 url: false, 37 sourceMap: true, 38 minimize: true, 39 importLoaders: 2 40 }, 41 }, 42 { 43 loader: 'postcss-loader', 44 options: { 45 sourceMap: true, 46 plugins: [ 47 require('autoprefixer')({grid: true}) 48 ] 49 }, 50 }, 51 { 52 loader: 'sass-loader', 53 options: { 54 sourceMap: true, 55 } 56 } 57 ], 58 }, 59 ], 60 } 61 };
あなたの回答
tips
プレビュー