webpack打包

ES6模块系统有 AMD CMD
但是没有任何解释器,浏览器实现了模块系统
怎么使用他们？

靠打包工具来实现，打包工具会解析他的模块系统

将依赖打包成一个文件

 

babel6之前打包都在一个包 以后就分开打包了

主要的babel-core 其他的转义的工作都以插件的方式提供

由于要打的包太多了,就出现了presets,它是一组插件的集合

 

首先需要安装nvm来管理node环境

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
然后添加

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
进配置文件 .bashrc或者其他类似的配置文件中

安装 node 
nvm install node的版本号

安装了node之后就可以使用 npm了这是node的包管理工具
只要安装了node,这个工具就可以直接使用了

新建工作目录
npm init  将当前目录变为 node 环境的目录  它会创建 package.json 文件

npm i babel-core --save-dev 安装babel-core --save-dev 会自动保存在 package.json文件中
这样在其他地方使用的时候 直接 npm i 就会帮助我们把所有东西都安装好
npm i webpack-cli
npm i babel-preset-es2015 --save-dev

npm i babel-preset-es2016 --save-dev
npm i babel-polyfill --save-dev
npm i babel-plugin-transform-decotators --save-dev
npm i webpack --save-dev 因为需要用到他的一些插件
npm i babel-loader --save-dev

 

创建webpack的配置文件 webpack.conf.js

var path=require('path');
var webpack=require('webpack')
module.exports={ // cmd 的语法
           entry:'./index.js', // 入口文件
           output:{ //入口文件输出配置
           path:path.join(__dirname,'dist'),//拼接目录
           filename:'app.js'
},

         watch:true,  自动监听  改变了源文件之后会自动重新打包,不需要每次都手动输入打包命令
module:{
       loaders:[ // 加载器配置
                 {
                   test:/\.js$/, // 什么样的文件
                   exclude:'node_modules', //不包括这里面的文件  这里好像要是决定路径
                   loader:'babel', //使用babel 必须是字符串 不能是列表

                   query:{ // 也可以在query里面实现也可以在.babelrc里面写(同目录下)
                          presets:['es2016','es2015'], //presets
                          plugins:['transform-decorator-legacy'] # 能够使用ES7里面的装饰器
                   } //提示要装一个插件
              }
         ]
    }
}

也可以不在这里面填写 query 项而在 .babelrc里面填写要加载的插件集

{     

        "presets":["es2015","es2016"]
        "plugins":["transform-decorator-legacy"]

}

执行 webpack -d(表示debug)--config webpack.conf.js   就会在dist目录下面生成app.js文件 

如果遇到 The node API for `babel` has been moved to `babel-core`
请将loader改为'babel-loader'

如果要使用装饰器
npm install babel-plugin-transform-decorators-legacy --save-dev  
然后在.babelrc里面加上transform-decorators-legacy即可