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 就行了
posted @ 2018-10-09 10:57  九萌萌  阅读(2255)  评论(0编辑  收藏  举报