美文网首页
2017-08-05读书笔记(Webpack学习笔记2)

2017-08-05读书笔记(Webpack学习笔记2)

作者: shaocx | 来源:发表于2017-08-06 00:42 被阅读0次

    今天继续上一次学习的Webpack。今天主要是自己的搭建以及实战,所以文字可能不多。

    文章是这篇 入门Webpack,看这篇就够了

    鉴于我是按照这篇文章中的东西直接操作,具体的步骤我就不复制了,只记录一些自己的感受以及一些自己查询到的东西。

    1. 文中下面这个命令行写了重复两边。可以不用执行,如果执行或告诉你报错,报错的原因是因为重名了,一般没必要执行两遍。

    npm install --save-dev webpack

    1. 我用的是mac,右键(两个手指点击的事件,我习惯叫做右键)是没有新建文件这个选项的,我查了一下,可以使用命令行,非常方便。
    touch fileName.js
    
    1. 在文章中下面一段对package.json的配置中,注释必须删掉,否则会报错。
    {
      "name": "webpack-sample-project",
      "version": "1.0.0",
      "description": "Sample webpack project",
      "scripts": {
        "start": "webpack" //配置的地方就是这里啦,相当于把npm的start命令指向webpack命令
      },
      "author": "zhang",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^1.12.9"
      }
    }
    
    1. Webpack的特性之一是可以生成Source Maps(使调试更容易)
      在webpack的配置文件中配置source maps,需要配置devtool,它有以下四种不同的配置选项,各具优缺点。
      分别是source-map、cheap-module-source-map、eval-source-map和cheap-module-eval-source-map,这四者打包速度越来越快,不过同时也具有越来越多的负面作用,较快的构建速度的后果就是对打包后的文件的的执行有一定影响。

    在学习阶段以及在小到中性的项目上,eval-source-map是一个很好的选项,但是打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项。

    今天先看这么多。。剩下下次继续~~

    相关文章

      网友评论

          本文标题:2017-08-05读书笔记(Webpack学习笔记2)

          本文链接:https://www.haomeiwen.com/subject/qhxilxtx.html