一、关于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学习记录-初步体验(一)的更多相关文章

  1. 前段学习 之 webpack 学习记录

    自动化安装 1.安装node (node -v查看node版本) 2.全局安装vue-cli  Npm install -g vue-cli  Vue- v:查看是否安装成功  Vue list:查看 ...

  2. webpack学习记录 - 学习webpack-dev-server（三）

    怎么用最简单的方式搭建一个服务器? 首先安装插件 npm i --save-dev webpack-dev-server 然后修改 packet.json 文件 "scripts" ...

  3. webpack学习记录-认识loader（二）

    Loader 就像是一个翻译员,能把源文件经过转化后输出新的结果,并且一个文件还可以链式的经过多个翻译员翻译. loader参考文章:https://webpack.docschina.org/loa ...

  4. webpack学习记录

    webpack 中文网站  https://webpack.docschina.org/ webpack1 有编译打包 模块热更新 代码分割 文件处理功能 webpack2 tree Shaking( ...

  5. Webpack 学习记录之概念

    1 什么是webpack webpack是一个模块打包器,可以递归的构建一个依赖关系图,其中包含每个程序需要的每个模块,然后将所有模块打包成一个或多个bundle.他和其他的工具最大的不同在于他支持c ...

  6. webpack学习记录 二

    开发网站 用polyfill(全局污染)  开发框架 用Runtime(局部污染) 在.babelrc文件中

  7. webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  8. Elasticsearch、XXLJob以及最近的学习记录

    Elasticsearch.XXLJob以及最近的学习记录 前言 在这九月的最后一周,来总结一下最近的学习记录,主要是对于Elasticsearch.XXLjob的初步学习,想着还是多记录点,以便后面 ...

  9. UWP学习记录12-应用到应用的通信

    UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...

随机推荐

  1. iOS----------YYModel

    weaterInfoModel *weather = [weaterInfoModel yy_modelWithDictionary:returnData[@"weatherinfo&quo ...

  2. 通过Erlang构建TCP服务应用案例（最原始方式）

    文章来源:公众号-智能化IT系统. 案例介绍 本文介绍的案例是TCP网络服务器的构建,用最原始的方式(非OTP).其功能很简单,通过网络TCP接口接收数据,按照指定的格式解析,并把数据存储至Mongo ...

  3. Hive之SerDe&Beeline

    一.SerDe SerDe:Serializer and Deserializer 序列化及反序列化,构建在数据存储和执行引擎之间,对两者实现解耦. Hive通过ROW FORMAT DELIMITE ...

  4. 微信小程序发红包

    背景: 近期一个朋友公司要做活动,活动放在小程序上.小程序开发倒是不难,不过要使用小程序给微信用户发红包,这个就有点麻烦 确定模式: 小程序目前没有发红包接口,要实现的话,只能是模拟红包,即小程序上做 ...

  5. centos7源码包安装Mongodb,并设置开机自启动

    1.下载源码包 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.12.tgz 2.解压 放到 /usr/local/ ...

  6. Vue-Router模式、钩子

    转:https://www.cnblogs.com/heioray/p/7193841.html 模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const ro ...

  7. fastjson List转JSONArray以及JSONArray转List

    1.fastjson  List转JSONArrayList<T> list = new ArrayList<T>();JSONArray array= JSONArray.p ...

  8. Python小数据池和字典操作

    小数据池 #id 查看内存地址 #多个代码块可以使用小数据池 #一个代码块中有一个问题,就是重复使用 #数字 -5~256 #字符串 字符串 乘法总数长度不能超过20, 0,1除外 #不能有特殊字符 ...

  9. 【Git】+安装+使用+配置

    Git安装及使用: https://www.cnblogs.com/ximiaomiao/p/7140456.html Git下载地址: http://git-scm.com/download/win ...

  10. spring cloud中feign的使用

    我们在进行微服务项目的开发的时候,经常会遇到一个问题,比如A服务是一个针对用户的服务,里面有用户的增删改查的接口和方法,而现在我有一个针对产品的服务B服务中有一个查找用户的需求,这个时候我们可以在B服 ...