WebPack

Posted tangshuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WebPack相关的知识,希望对你有一定的参考价值。

介绍

 webpack:对前端中的资源(html css js png mp3 mp4 font等)进行打包输出一个js文件,后续引入该文件,上线

 webpack中有很多loader,Webpack会把我们的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项

 目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的javascript文件

安装

npm install -g webpack webpack-cli
或者
npm install webpack webpack-cli --save

使用例

index.html    main.js (入口文件)  app.js

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>web pack</h1>
<script src="bundle.js"></script>
</body>
</html>
main

//
import app from ‘./app‘ // console.log(app); // // import {name,age,f1}from ‘./app‘ // f1(); import *as o from ./app console.log(o);
//app

let name = "alex"; let age = 23; export default name export {age} export var fav = "鸡汤"; export var f1 = function () {alert(w)};

 

配置

npm init --yeas

npm install webpack

  

以上是关于WebPack的主要内容,如果未能解决你的问题,请参考以下文章

Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

如何使用webpack加载库源映射?

浅析 -- webpack

报错:✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段

报错:✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段

无法创建中继容器; graphql.js 文件似乎有 webpack 工件?