Web前端 - webpack和babel勾结

Web前端 - webpack和babel勾结

webpack 就是一个打包工具 JS 图片 各种都就可以打包。

安装webpack

nmp install webpack

在项目根目录建立配置文件：

module.exports =
 {
  entry:[    //entry 是入口文件，可以多个，代表要编译那些js
        './daichen.js'
  ],
  output: {
        path: './build/js',  //输出文件夹
        filename:'build.js'   //最终打包生成的文件名
    }
 }

命令窗口下执行：webpack

如果要和第三方结合 （babel） 需要安装 babel-loader

npm install babel-loader （会自动安装babel-core依赖 babel-loader）

修改配置文件：

module.exports = {
    entry:[
 './es2015/index.js'//代表入口(总)文件 ，可以写多个。
 ],
 output: {
     path: './es2015/',  //输出文件夹
     filename:'index-webpack.js'   //最终打包生成的文件名
 },
 //引用外部加载器
 module: {
      loaders: [
          {
             test: /\.js|jsx$/,   //是一个正则，代表js或者jsx后缀的文件要使用 下面的loader
             loader: 'babel',
             query:{
                 presets:['es2015']
              }
          },
      ]
    }
}

babel是语法转化工具、webpack是打包工具。

例如：

创建一个文件 ui.js 认为是一个模块 index.js为入口文件。

ui.js:

var name="daichen";
exports.abc=name; //导出模块名
index.js
var m=require("./ui.js");   //webpack可以识别
console.log(m.abc);

此时用webpack打包处理 webpack index.js index-bulid.js 生成的文件是可以正常使用的 因为没有涉及ES2015语法

但是：

ui.js

let name="daichen";
let age="18";
export{name,age};

index.js

import {name,age} from "./ui.js";
console.log(name);
console.log(age);

此时用webpack打包处理 生成的文件是不可用的 因为有ES2015语法 所以 要和Babel结合。

想压缩？？？webpack -p