零配置前端构建工具parcel 初探

前端圈内新工具层出不穷，不断提升各位FEer的开发效率和体验。
前端工程构建方案从grunt -> glup ->webpack 不断地在改进。webpack有很多优点，如：code splitting，HRM，css module ， source map都是经常使用的，但功能强大，自由度高，导致代码的工程配置很多，往往超过500行以上，并且并不一定是最优的配置，所以 parcel 应运而生。

特点：

• 零配置（配置量确实很少，webpack4 会对一些功能进行零配置）。
• 不同于传统打包工具的打包策略，把js文件中引入的一些非js资源，都会单独放到一个依赖包中，在output的时候会把，对于其他资源，诸如 图片资源 会直接在导出在 js 中一个绝对路径， 并且会自动帮你生成source map。
• css中的 @import 的文件，会全部打包在一个CSS文件中。

插件

• Babel

  因为我们经常使用ES6、ES7语法，那我们就需要对js进行转码。babel就是我们使用的，所以我们只需配置一个.babelrc 文件，然后选择配置你使用的转码插件。

 cnpm i babel-preset-env

{
    "presets": ["env"]
}

• Postcss

cnpm i postcss-modules autoprefixer -D

创建`.postcssrc`文件

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

HRM
parcel的模块热替换仅仅是针对js和css资源的。

生产环境

parcel build index.js