webpack学习记录-初步体验(一)
一、关于webpack
自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主要的目的就是将所有小文件打包成一个或多个大文件，官网的图片很好的诠释了这个问题，除此之外，Webpack 也是一个能让你使用各种前端新技术的工具。
关于gulp与webpack对比，转到https://www.cnblogs.com/zuobaiquan01/p/8600365.html
npm init
// 推荐这个安装方式，当然你也安装在全局环境下
// 这种安装方式会将 webpack 放入 devDependencies 依赖中
npm install --save-dev webpack
创建相关文件
// sum.js
// 这个模块化写法是 node 环境独有的，浏览器原生不支持使用
module.exports = function(a, b) {
return a + b
}
// index.js
var sum = require('./sum')
console.log(sum(1, 2))
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./build/bundle.js"></script>
</body>
</html>
配置最简单的 webpack，首先创建 webpack.config.js 文件
// 自带的库
const path = require('path')
module.exports = {
entry: './app/index.js', // 入口文件
output: {
path: path.resolve(__dirname, 'build'), // 必须使用绝对地址，输出文件夹
filename: "bundle.js" // 打包后输出文件的文件名
}
}
命令行输入：
node_modules/.bin/webpack
每次要输入 node_modules/.bin/webpack 过于繁琐，可以在 package.json 如下
"scripts": {
"explain": "node_modules/.bin/webpack 这里的webpack为依赖项",
"start": "webpack"
},
我们发现有一个提示WARNING
大致意思就是：未设置mode(模式)，请指定是“开发环境”还是“生产环境”；
解决办法：只需要在package.json中添加配置项：
"scripts": {
"start": "xxx --mode development",
"build": "xxx --mode production"
}
可以发现原本两个 JS 文件不到 100B，但是打包后却增长到1010B，这其中 webpack 肯定做了什么事情，因为 module.export 浏览器是不支持的，所以 webpack 将代码改成浏览器能识别的样子。在浏览器中打开index.html 文件，就可以看到正确的 console信息。
相关源码地址：https://github.com/zuobaiquan/webpack/tree/master/my_webpck
webpack学习记录-初步体验(一)的更多相关文章
- 前段学习 之 webpack 学习记录
自动化安装 1.安装node (node -v查看node版本) 2.全局安装vue-cli Npm install -g vue-cli Vue- v:查看是否安装成功 Vue list:查看 ...
- webpack学习记录 - 学习webpack-dev-server（三）
怎么用最简单的方式搭建一个服务器? 首先安装插件 npm i --save-dev webpack-dev-server 然后修改 packet.json 文件 "scripts" ...
- webpack学习记录-认识loader（二）
Loader 就像是一个翻译员,能把源文件经过转化后输出新的结果,并且一个文件还可以链式的经过多个翻译员翻译. loader参考文章:https://webpack.docschina.org/loa ...
- webpack学习记录
webpack 中文网站 https://webpack.docschina.org/ webpack1 有编译打包 模块热更新 代码分割 文件处理功能 webpack2 tree Shaking( ...
- Webpack 学习记录之概念
1 什么是webpack webpack是一个模块打包器,可以递归的构建一个依赖关系图,其中包含每个程序需要的每个模块,然后将所有模块打包成一个或多个bundle.他和其他的工具最大的不同在于他支持c ...
- webpack学习记录 二
开发网站 用polyfill(全局污染) 开发框架 用Runtime(局部污染) 在.babelrc文件中
- webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
- Elasticsearch、XXLJob以及最近的学习记录
Elasticsearch.XXLJob以及最近的学习记录 前言 在这九月的最后一周,来总结一下最近的学习记录,主要是对于Elasticsearch.XXLjob的初步学习,想着还是多记录点,以便后面 ...
- UWP学习记录12-应用到应用的通信
UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...
随机推荐
- 如何程序化的构造Hibernate配置 // How to initialize Hibernate programmably
Java为什么被人诟病,因为一切都是过度设计.Hibernate其实就是实现了一套JPA的ORM,不过用极度冗赘的配置方式,nodejs Sequelize.js,甚至Python SQLAlchem ...
- 定时任务 Cron表达式
Cron表达式由6~7项组成,中间用空格分开.从左到右依次是: 秒.分.时.日.月.周几.年(可省略) Cron表达式的值可以是数字,也可以是以下符号: "*":所有值都匹配 &q ...
- access denied for user 'root'@'localhost'(using password:YES) FOR WINDOWS
以windows为例: mysql5.5 1. 关闭正在运行的MySQL服务. 2. 打开DOS窗口,转到mysql\bin目录. 3. 输入mysqld --skip-grant-tables 回车 ...
- Java文件下载：如何编码文件名称以及如何设置HttpServletResponse
在下载文件时,经常遇到文件名乱码等问题. 本文说明如何编码文件名,以及如何设置HttpServletResponse对象. 1,如何编码文件名 String userAgent = request.g ...
- Windows 下安装drozer（Windows 10），连接手机（红米note4X）
Windows 下安装drozer(Windows 10),连接手机(红米note4X) 首先下载drozer(http://mwr.to/drozer). 红米手机开发者模式 遇到第一个问题,红米手 ...
- Markdown语法指南
1.背景 个人比较喜欢用Markdonw写东西,比如写博客随笔,写有道云笔记等,但有的时候会突然忘记某个具体语法怎么写了,如插入图片.插入链接.表格等,那干脆把这个语法简单地总结一下,也方便日后快速查 ...
- MySQL 数据库的创建&修改
-- 创建数据库 CREATE DATABASE [IF NOT EXISTS]<数据库名> DEFAULT CHARACTER SET utf8; -- 默认字符集为utf8 -- 指定 ...
- topjui中datagrid增删改查
1.掌握datagrid的创建方式在html中直接定义与在js中定义 可参考easyui的官方文档:http://www.jeasyui.net/plugins/183.html 2.实现代码如下:重 ...
- Tomcat与Nginx服务器的配合使用及各自的区别
Nginx常用做静态内容服务和反向代理服务器,以及页面前端高并发服务器.适合做负载均衡,直面外来请求转发给后面的应用服务(tomcat ,django什么的),Tomcat更多用来做做一个应用容器,让 ...
- C#基础知识之字符串比较方法：“==”操作符；RefernceEquals；String.Equals方法；String.Compare方法；String.CompareOrdinal方法。
一.“==”操作符:String.Equals:ReferenceEquals 方法 1.在编程中实际上我们只需要这两种比较,c#中类型也就这两种 (1)值类型的比较:一般我们就是判断两个值类型实例各 ...