webpack和babel

Posted 2021-04-29 web前端开发者们

npm新建文件夹后

后开始在本文件夹安装Webpack：cnpm install --save-dev webpack

vue中的node_modules在webstorm中exclude下，不然容易卡死，

新方法：找个不含node_modules的项目打开，一劳永逸！

第三步，安装Babel

cnpm install babel-loader

cnpm install babel-core

第四步，编译。

当前项目根目录，新建一个名为webpack.config.js的文件

内容为：

var webpack = require("webpack");
var path = require("path");

module.exports={
    entry:'./import.js',
    output:{
        path:path.resolve(__dirname,"dist"), 
        filename:'bundle.js',
    },
    module:{
        loaders:[
            { 
                test:/\.js$/,
                loader:'babel-loader'
            }
        ]
    }
}

“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

(好累，每次都要对比。

简单介绍一下，entry属性是设置你的项目的入口文件，啥叫入口文件呢，就是最终的调用方的，可以理解为main方法所在的那个类，显然我们这项目中入口文件是import.js

然后我们再跑一个命令：

webpack

这时可以看到文件夹中多出了一个dist文件夹，里面有个bundle.js文件，这个就是最终编译好的ES5文件，然后我们写个html，引用这一个JS文件就行了。

另一种项目中直接用babel解析es6语法的用法: