Webpack的用法

若报错:You need an appropriate loader to handle this file type
在webpack.config.js中加入vue的解析

解析vue
{
    test:/\.vue/$,
    loader:'vue-loader',
}

webpack找人来理解你写的单文件代码
vue-loader,vue-template-compiler,代码中依赖vue  

命令行:
npm i vue -S ;npm i vue-loader vue-template-compiler -D


默认
导入 import [xxx] from './xxx'
导出 export default obj

声明式
导出  export var obj=xxx;
导出  export var obj={  };

单独导入  export {stu};
导入     import {obj1,obj2,stu} from './xxx.js'



src 存放人可以看得懂的源代码,具备一定的功能划分,MVC
dist 存放真实上线的代码,减少请求混淆代码,机器能看懂
webpack.config.js 打包生成dist下的代码
package.json文件 包信息描述

webpack立刻读取webpack.config.js文件,生成到dist目录下
webpack-dev-server 运行src下的代码,虚拟出build.js测试


在当前package.json文件夹下,运行npm i

package.json如何生成的呢? (创建文件夹后执行) npm init -y

data(){
    return{ 这里是放数据的地方
        text:'大家好'
    }
}

猜你喜欢

转载自blog.csdn.net/a3060858469/article/details/80616759