webpack打包初体验

因为浏览器识别不了es6的一些语法，所以我们写的代码需要处理成浏览器识别的语言，至于转换的这个工作就交给webpack来做了。

git:git@github.com:ghrGit/webpack001.git

1.先简单写几个待打包的文件

目录结构：

a.js

export default function a(){console.log('module a');
}

b.js

export default function b(){console.log('module b');
}

app.js 为入口文件

import a from './a';
import b from ',/b';
a();
b();

2.在demo1下运行npm init -y 生成一个默认的package.json 文件并配置运行脚本

"dev":"webpack"  运行webpack，默认运行webpack.config.js文件

{"name": "demo1","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev":"webpack"   },"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^3.8.1"}
}

3.在demo1下运行npm i -D webpack 安装项目开发(-D)的依赖 webpack ，会增加一个node_modules文件夹

4.新建一个dist文件夹，用于放置打包后的文件

5. 在demo1下新建一个文件webpack.config.js (复制的话请把注释去掉)

const path = require('path');
module.exports={entry:'./src/app.js',//打包入口
  output:{  path:path.resolve(__dirname,'dist'),//  打包后文件的放置的绝对路径filename:'main.js'  //打包生成文件的文件名
  }
}

6.在demo1下运行npm run dev 这个时候应该你打包后的文件main.js已经在dist文件夹下面了。

7.在dist新建一个index.html 文件，引入main.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body></body>
<script src='./main.js'></script>
</html>

8.运行index.html 看console如图

转载于:https://www.cnblogs.com/guohuiru/p/webpack.html

webpack打包初体验相关推荐

webpack 初体验
翻墙看视频教程:https://www.youtube.com/watch?v=TaWKUpahFZM 看了教程,自己练习练习,记个笔记,我把教程的例子划分成5个独立小demo,加强练习,也方便梳理思 ...
webpack从入门到精通（一）初体验
1. webpack简介 1.1 webpack是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 在 webpack 看来, 前端的所有资源文件(j ...
SSR初体验-结合Vue3全家桶
SSR初体验基础搭建安装依赖先开启一个服务器 let express = require("express");let server = express();server.g ...
深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...
webpack打包vue反编译_2020年你必须知道的webpack打包优化方法
本文字数:3534字预计阅读时间:10分钟随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大.最糟糕的是单页面应 ...
FlashCache初体验
FlashCache初体验注意: 测试用的是CentOS6.5 内核版本2.6.32-431.el6.x86_64 步骤: 上传CentOS6.5做本地yum源,安装以下包. yum install ...
文档数据库RavenDB-介绍与初体验
不知不觉,".NET平台开源项目速览"系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分 ...
“约见”面试官系列之常见面试题第四十四篇之webpack打包原理解析？（建议收藏）
webpack打包是如何运行的也可以称为,webpack是如何实现模块化的 CommonJS是同步加载模块,一般用于node.因为node应用程序运行在服务器上,程序通过文件系统可以直接读取到各个模 ...
Windows Embedded CE 6.0开发初体验（一）Windows CE概述
这篇文章的目的并不是介绍Windows Embedded CE开发的方方面面,只是用一个初涉嵌入式领域的软件开发者的视角来介绍Windows CE开发中最常用的概念和知识,解决大家会在实际开发中碰到的 ...
创建基于webpack打包的vue项目
创建基于webpack打包的vue项目结合win7.element-ui.vue(vue-router.vue-cli).webpack等技术,完成了项目的基础工作.难则不会,会则不难:贵在经验总结 ...

webpack打包初体验

webpack打包初体验相关推荐

最新文章

热门文章