yarn + webpack@4.20.2


1、新建一個文件夾

2、在文件夾下運行yarn init

3、運行yarn global add webpack(此處是全局安裝,如果你是局部安裝的,想要使用webpack命令必須進入node_modules/.bin/webpack才能執行webpack命令,.bin目錄包含的是一系列可以執行的命令,但是在npm srcipts里可以直接訪問此目錄下的命令,可以先配置npm scripts腳本命令)

   原本以為沒問題,但是卻報錯了,在生成的yarn-error.log文件上看,說是超時,設置淘寶鏡像代理就能解決了 

 yarn config set registry https://registry.npm.taobao.org

4、再次執行yarn global add webpack,就可以成功了。

5、編寫webpack.config.js等文件

6、運行webpack命令,發現還是報錯,說找不到webpack命令

   這是因為CLI命令行工具已經移到了單獨的一個包里面,所以需要單獨安裝

7、yarn global add webpack-cli,再次運行webpack,就成功了,但是會有警告,提示

   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 defaultsfor each environment.

    原來,在Webpack中,提供了mode變量,用於配置運行環境,mode的值可以為development,表示的是開發模式,或者是production,表示的是生產模式。可以在npm scripts中配置一下。

  (npm scripts教程可參考阮一峰老師的教程 http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html)

8、在package.json文件中,加

  "scripts": {
    "build":"webpack --mode production",
    "dev":"webpack --mode development"
  }
     再運行npm run dev/build 就行了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM