Wordpressのtheme開発にwebpack4導入を検討しています。
こちら https://teratail.com/questions/134422 で質問させていただいたような状況を経て、現在以下のようなwebpack-config.js
にて main.css
とeditor-style.css
の2つを出力しておりますが、sourceMapの出力ができなくなってしまいました。
(optionでsourcemapの吐き出しをtrue
にする箇所が複数あるが、全て true にしてもNGでした)
おそらくちょっとした事だと思いますが、わからずご助言頂ければ幸いです。
###webpack-config.js
const MODE = 'development' const enabledSourceMap = (MODE === 'development') const path = require('path') const WP_THEME_NAME = 'project-name' const WP_THEME_PATH = '../wordpress/wp-content/themes/' + WP_THEME_NAME const PUBLIC_DIR_PATH = path.resolve(__dirname, '../wordpress') const PUBLIC_DIR_DIST_PATH = path.resolve(__dirname, WP_THEME_PATH) const PUBLIC_ASSETS_DIR_PATH = './assets' module.exports = { mode: MODE, entry: [ `./src/js/index.js`, `./src/scss/main.scss`, `./src/scss/editor-style.scss` ], output: { path: PUBLIC_DIR_DIST_PATH, filename: PUBLIC_ASSETS_DIR_PATH + '/js/app.js' }, devtool: 'source-map', devServer: { contentBase: PUBLIC_DIR_PATH, open: true, host: '0.0.0.0', disableHostCheck : true, public: '0.0.0.0', }, module: { rules: [ { test: /.scss$/, use: [ { loader: 'file-loader', options: { name: '[name].css', context: './src/css/', outputPath: 'assets/css/', publicPath: '../' } }, { loader: 'extract-loader', }, { loader: 'css-loader', options: { url: true, sourceMap: enabledSourceMap, minimize: true, }, }, { loader: 'resolve-url-loader' }, { loader: 'postcss-loader', options: { sourceMap: enabledSourceMap, plugins: [ require('autoprefixer')({grid: true}) ] }, }, { loader: 'sass-loader', options: { sourceMap: enabledSourceMap } } ] }, { test: /.(gif|png|jpg|eot|wof|woff|woff2|ttf|svg)$/, loader: 'url-loader' }, { test: /.js$/, use: [ { loader: 'babel-loader', options: { presets: [ ['env', {'modules': false}] ] } } ], exclude: /node_modules/, } ] }, }
使用中パッケージ
{ "devDependencies": { "autoprefixer": "^8.6.4", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-env": "^1.7.0", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^4.0.0-beta.0", "node-sass": "^4.9.0", "postcss-loader": "^2.1.5", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^4.12.2", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4" }, "dependencies": { "browser-sync": "^2.24.5", "extract-loader": "^2.0.1", "file-loader": "^1.1.11", "jquery": "^3.3.1", "resolve-url-loader": "^2.3.0" } }
あなたの回答
tips
プレビュー