vue-webpack

webPack

  • 什么是webPack,从本质上讲webPack是一个现代的JavaScript应用的静态模块打包工具
  • 前端模块化的一些方案:AMD、CMD、CommonJS、ES6
  • webPack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的关系
  • 而且不仅仅是JavaScript文件,我们的css、图片、json文件等等在webPack中都可以被当作模块来使用
  • 将webPack中的各种资源模块进行打包合并成一个或多个包(bundle)
  • 在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss文件转成css,将ES6语法转成ES5语法,将typescript转成javascript等等操作
grunt/gulp的对比
  • grunt/gulp的核心是Task
    我们可以配置一系列task,并且定义task要处理的任务
    之后让grunt/gulp来一次执行这些task,而且让整个流程自动化
    所以grunt/gulp也被称为前端自动化任务管理工具

  • 我们来看一个gulp的task
    下面的task就是将src下面的所有js文件转成ES5的语法
    并且最终输出到dist文件夹中

  • 什么时候用grunt/gulp
    如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念
    只需要进行简单的合并、压缩,就使用grunt/gulp即可
    但是如果整个项目使用了模块化管理,而且相互依赖非常强,我们就可以使用更加强大的webpack了

  • grunt/gulp和webpack有什么不同
    grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心
    webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能

webpack的安装

必须依赖node环境
node为了可以正常执行很多代码,必须其中包含各种依赖的包npm工具(node packages manger)

  • 安装webpack首先需要安装node.js,Node.js自带了软件包管理工作npm
  • 查看自己的node状态, node -v
  • 全局安装webpack: npm install webpack@3.6.0 -g
  • 局部安装webpack:
    cd 到对应的目录
    npm install webpack@3.6.0 --save-dev
文件和文件夹解析

dist文件夹:用于存放之后打包的文件
src文件夹:用于存放我们写的源文件

  • main.js :项目的入口文件
  • index.html: 浏览器打开展示的首页面
  • package.json: 通过npm init生成的,npm包管理的文件(暂时没有用上,)

模块化

导入和导出
早期

//aaa.js 导出
moduleA = (function(){
   
	obj = {
   };
	var flag =false;
	function sum(){
   }
	obj.flag = flag;
	obj.sum = sum;
	return obj
})()

//bbb.js
console.log(moduleA.flag )//相当于导入


commonjs

//aaa.js文件
//导出
modlue.exports ={
   
	flag:true,
	test(a,b){
   }
}


//导入
let {
   test,demo,flag}=require('./aaa.js')


es6

export flag =true;
export function sum(){
   }

export class person{
   }export{
   flag,sum}
import{
   flag,sum}from './aaa.js'

直接webpack不用指明路径的配置

需要在工程路径下简历一个文件webpack.config.js文件,配置;

  • entry: 文件的输入路径
  • output:文件的输出路径
const path = require('path')
module.exports = {
   
    entry: './src/main.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
    },
}

path是一个node库,如果需要是用需要执行npm init

package.json中定义启动

我们可以在package.json中的scripts中定义自己的执行脚本

简化执行命令,在scripts对象中配置
如:“build”:“webpack”

{
   
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":</
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值