• 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 就行了
  • 相关阅读:
    HDU 1394 Minimum Inversion Number
    LA 3938 动态最大连续和(线段树)
    HDU 1754 I Hate It(线段树)
    HDU 1166 敌兵布阵(线段树 or 二叉索引树)
    《乞力马扎罗的雪》读书笔记
    LA 3266 田忌赛马
    UVa 11235 频繁出现的数值
    《月亮与六便士》读书笔记
    LA 3135 阿格斯(优先队列)
    LA 3027 合作网络
  • 原文地址:https://www.cnblogs.com/jiumengmeng/p/9759100.html
Copyright © 2020-2023  润新知