Webpackで詰まった時に解決した方法。(when I straggled with Webpack)

webpack

投稿日：2020年1月13日 更新日：

この記事の読者にあたる人

  • webpackでつまっている人
  • webpackに関するエラーを知りたい人

Open dist/index.html command が使えなかった。

解決方法

  • Start dist/index.htmlで解決(windows)

理由は、自分がwindows userであったため。

Webpackが起動できない(npm start)

解決方法

1.エラーを確認

 C:\Users\taiga\AppData\Roaming\npm-cache\_logs\2019-12-23T02_27_43_525Z-debug.log

2.npmをuninstallした。

・npm uninstall

参考サイト

https://createapp.dev/

Github

https://github.com/plotly/dash-component-boilerplate/issues/12

次のエラー(npm run 時に)

Loaders should be updated to allow passing options via loader options in module.rules.

Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:    

     plugins: [

       new webpack.LoaderOptionsPlugin({

         // test: /\.xxx$/, // may apply this only for some modules

         options: {

           devserver: …

     }

       })

     ]

So that I changed  the place , i did comment out

And I could have done “npm run start “

Result (結果)

Later I added bellow the sentences

devserver: {

      contentBase:’/dist’

    },

//

These codes were causing some error

The new way (新しい解決策)

npm install –save-dev webpack@4 webpack-cli@2 webpack-dev-server@3

  1. npm install –save-dev babel-core@6 babel-preset-env@1 babel-loader@7
  2. npm install –save babel-polyfill@6

New error (npm run error)

Change

“start”: “webpack-dev-server –mode development –open”

elifecycle

Into (下のものに変えたところ)

“start”: “webpack-dev-server –mode production –open”

But not working (機能しなかった)

And I thought

This is npm elifecycle

参考サイト

https://qiita.com/ishizukih/items/9673e709832dacaa5155

result (結果)

Could not have solved the problem (解決できない)

ここでやったことは、あまり意味なかったかもしれません。

I restarted (リスタートしました)

WARNING in configuration

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to

enable defaults for each environment.

You can also set it to ‘none’ to disable any default behavior. Learn more:

https://webpack.js.org/configuration/mode/

 

参考サイト

https://webpack.js.org/configuration/mode/#usage

Later (その後)

I did “npm run build ” success “(成功)

参考サイト

Npm documentation

https://docs.npmjs.com/packages-and-modules/

I have done it

 

I finished up to the npm start

As a conclusion(まとめ)

Miss (自分のミス)

  • my type miss
  • server problem

自分は、こんな感じのミスをしていました。タイプミスとか結構あるんで皆さんも気をつけてください。

Important things in here (

  • Npm run dev
  • Npm run build
  • Npm run start

を一つずつやっていく。自分の場合、これをひとつ作っていくことで、localhost:8080で開くことができました。