前提・実現したいこと
これまでgulpを使っていたのですが、webpackを使おうと思い、このサイトを参考に設定をしていました。
https://www.expexp.jp/webpack/
コンパイルしたらjsとcssは別に出力するのが前提です。
↑これを実現させるためにいろんなサイトを見たのですが、上記のサイト以外ではうまくいきませんでした。
今後、autoprefixerやcssのminifyも追加する予定です。
発生している問題・エラーメッセージ
npm run build
でコンパイルは実行できるのですが、npm run watch
でwatchしようとするとエラーが返ってきます。
buildはできるのにwatchだけ出来ない理由がわからず、、、ReferenceErrorでwebpackが無いと言われたり、、、完璧に詰まってしまいました。
ご教授のほどお願いいたします。
> myproject@ watch C:\Users\path\Documents\personal\private\test\webpack > webpack --watch C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:244 throw err; ^ ReferenceError: webpack is not defined at Object.<anonymous> (C:\Users\path\Documents\personal\private\test\webpack\webpack.config.js:50:7) at Module._compile (C:\Users\path\Documents\personal\private\test\webpack\node_modules\v8-compile-cache\v8-compile-cache.js:178:30) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) at Module.require (module.js:597:17) at require (C:\Users\path\Documents\personal\private\test\webpack\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at WEBPACK_OPTIONS (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:133:13) at requireConfig (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:135:6) at C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:142:17 at Array.forEach (<anonymous>) at module.exports (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\convert-argv.js:140:15) at yargs.parse (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:241:39) at Object.parse (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18) at C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:219:8 at Object.<anonymous> (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack-cli\bin\cli.js:538:3) at Module._compile (module.js:653:30) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) at Module.require (module.js:597:17) at require (internal/module.js:11:18) at Object.<anonymous> (C:\Users\path\Documents\personal\private\test\webpack\node_modules\webpack\bin\webpack.js:155:2) at Module._compile (module.js:653:30) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! myproject@ watch: `webpack --watch` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the myproject@ watch script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\path\AppData\Roaming\npm-cache\_logs\2018-11-19T01_17_40_262Z-debug.log
package.json
{ "name": "myproject", "scripts": { "build": "webpack", "watch": "webpack --watch" }, "devDependencies": { "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "babel-loader": "^8.0.2", "css-loader": "^1.0.0", "node-sass": "^4.9.3", "sass-loader": "^7.1.0", "webpack": "^4.17.2", "webpack-cli": "^3.1.0" }, "dependencies": { "jquery": "^3.3.1", "mini-css-extract-plugin": "^0.4.2" } }
webpack.config.js
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'development', //development or production entry: './src/js/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: './assets/js/bundle.js' }, module: { // babel-loaderの設定 rules: [ { test: /.js$/, use: [ { loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ] } } ], exclude: /node_modules/, }, { test: /.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false, minimize: true, } }, { loader: 'sass-loader' } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: './assets/css/style.css' }), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] };
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。