使用上篇已谈过，这篇纯代码！！~~

<!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>

  <!-- <script src="../dist/bundle.js"></script> -->

  <!-- <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css"> -->

</head>

<body>

  <div class="box"></div>

  <div class="box2"></div>

  <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

</body>

</html>


{

  "name": "01.webpack-study",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack-dev-server --open --port 3000 --hot"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",

    "babel-plugin-transform-runtime": "^6.23.0",

    "babel-preset-env": "^1.6.1",

    "babel-preset-stage-0": "^6.24.1",

    "css-loader": "^0.28.7",

    "file-loader": "^1.1.5",

    "html-webpack-plugin": "^2.30.1",

    "less": "^2.7.3",

    "less-loader": "^4.0.5",

    "node-sass": "^4.5.3",

    "sass-loader": "^6.0.6",

    "style-loader": "^0.19.0",

    "url-loader": "^0.6.2",

    "webpack": "^3.8.1",

    "webpack-dev-server": "^2.9.3"

  },

  "dependencies": {

    "bootstrap": "^3.3.7"

  }

}

bable要使用必须加入如下配置：

{

  "presets": ["env", "stage-0"],

  "plugins": ["transform-runtime"]

}


// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的

var path = require('path')

// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部

// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点

var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建

module.exports = {

  entry: path.join(__dirname, './src/main.js'), // 入口文件

  output: { // 指定输出选项

    path: path.join(__dirname, './dist'), // 输出路径

    filename: 'bundle.js' // 指定输出文件的名称

  },

  plugins: [ // 所有webpack  插件的配置节点

    new htmlWebpackPlugin({

      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径

      filename: 'index.html' // 设置生成的内存页面的名称

    })

  ],

  module: { // 配置所有第三方loader 模块的

    rules: [ // 第三方模块的匹配规则

      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader

      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader

      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader

      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader

      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串

      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader

      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法

    ]

  }

}


// 项目的JS入口文件

console.log('ok')

import './css/index.css'

import './css/index.scss'

// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径

// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找

import 'bootstrap/dist/css/bootstrap.css'

// class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式

class Person {

  // 使用 static 关键字，可以定义静态属性

  // 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性

  // 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性

  static info = { name: 'zs', age: 20 }

}

// 访问 Person 类身上的  info 静态属性

console.log(Person.info)

// 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中

// 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法

// 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：

// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D

// 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：

// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }

// 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：

// 2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；

// 2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！

// 3. 在项目的 根目录中，新建一个 叫做 .babelrc  的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号

// 3.1 在 .babelrc 写如下的配置：  大家可以把 preset 翻译成 【语法】 的意思

        // {

        //   "presets": ["env", "stage-0"],

        //   "plugins": ["transform-runtime"]

        // }

// 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法

// Java  C#  实现面向对象的方式完全一样了，   class 是从后端语言中借鉴过来的， 来实现面向对象

// var p1 = new Person()

// function Animal(name){

//   this.name  = name

// }

// Animal.info = 123

// var a1 = new Animal('小花')

// // 这是静态属性：

// // console.log(Animal.info)

// // 这是实例属性：

// console.log(a1.name)

webpack资源处理的更多相关文章

  1. Webpack实战（三）：作为前端你不得不懂的Webpack资源入口和出口的配置

    关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置. 如果想 ...

  2. webpack资源加载常用配置

    const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundl ...

  3. webpack入门-个人学习资源收集

    本来是想自己写哈个人学习webpack心德的,不过网上现在已经有各种比较好的,详细的入门或者深入资源了. 所以我就简单总结了一下,我在入门webpack时看的一些博客和文档,以及顺道看到的一些觉得也应 ...

  4. webpack开发和生产两个环境的配置详解

    一开始在接触webpack 的时候,简直痛不欲生,现在回头看,做个注释,当然参考了很多文章.这是一个关于vue 开发的webpack 架构会列举出来webpack 系列教程Webpack——令人困惑的 ...

  5. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置，给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  6. # webpack 打包工具（vue）

    vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...

  7. vue中webpack的配置理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  8. Webpack实战（四）：教教你如何轻松搞定-预处理器（loader）

    前面三节,我主要给大家分享了有关webpack的一些配置的知识点,如何打包js文件,而如果我们遇到其他类型的资源如图片.css.字体font等等,我们该如何处理呢?今天会介绍预处理器(loader), ...

  9. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

随机推荐

  1. 这可能是最漂亮的Spring事务管理详解

    事务概念回顾 什么是事务? 事务是逻辑上的一组操作,要么都执行,要么都不执行. 事物的特性(ACID): 原子性: 事务是最小的执行单位,不允许分割.事务的原子性确保动作要么全部完成,要么完全不起作用 ...

  2. 递归找到多级文件夹中所有pdf文件的py程序

    因个人需要,写了一个可以递归找到多级文件夹中所有pdf的小程序,发布出来供有需要的人参考或使用. import os import re import shutil from os.path impo ...

  3. PHP 管理树莓派

    同学给过我一块树莓派,那会儿觉得挺新鲜的.但是每次使用都需要远程桌面或者 ssh 进行登录,比较麻烦.后来为了方便管理,在树莓派上安装部署了 LAMP 环境,然后写了一个简单的 PHP 页面,代码如下 ...

  4. Vue 从入门到进阶之路（十三）

    之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...

  5. SpringBoot2.0 整合 JWT 框架，解决Token跨域验证问题

    本文源码:GitHub·点这里 || GitEE·点这里 一.传统Session认证 1.认证过程 1.用户向服务器发送用户名和密码. 2.服务器验证后在当前对话(session)保存相关数据. 3. ...

  6. pecl安装和卸载示例

    比如安装MongoDB扩展 命令行下输入: [#] /usr/local/php/bin/pecl install mongodb ......嗒吧嗒吧一大堆输出后 Build process com ...

  7. Java操作数据库——在JDBC里使用事务

    Java操作数据库——在JDBC里使用事务 摘要:本文主要学习了如何在JDBC里使用事务. 使用Connection的事务控制方法 当JDBC程序向数据库获得一个Connection对象时,默认情况下 ...

  8. ElementUI项目中怎样引用Jquery

    场景 使用ElementUI的快速开始的项目模板搭建Element项目后, 要在vue页面中使用jquery的语法. 这里直接使用$.ajax会提示$找不到. 注: 博客:https://blog.c ...

  9. Cesium专栏-气象卫星云图动图（附源码下载）

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  10. 推荐一个Emoji框架

    表情的需求很常见.有的可以看看,没有的可以先收藏以备不时之需. 这个框架的反应速度很快,界面简洁漂亮,功能完备. 而且代码简洁易懂,便于学习. GitHub:https://github.com/ne ...