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

<!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. Tomcat9+JDK 13报错Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable is needed to run this program

    Tomcat使用的是https://tomcat.apache.org/download-90.cgi Tomcat9 之前安装的JDK 13,有JAVA_HOME环境变量地址(C:\Program ...

  2. Idea2019激活码

    此教程仅用作个人学习,请勿用于商业获利,造成后果自负!!! 此教程已支持最新2019.2版本 此教程实时更新,请放心使用:如果有新版本出现猪哥都会第一时间尝试激活: idea官网下载地址:http:/ ...

  3. RobotFramework不同版本优劣势

    一.RIDE 1.5.2.1 1. 安装: pip install robotframework-ride==1.5.2.1 2. 优点: 此版本是RIDE发布以来最为稳定的版本,使用性能上也较为流畅 ...

  4. C#之Form表单认证

    原文地址: https://blog.csdn.net/chadcao/article/details/7859394 ASP.NET的安全认证,共有“Windows”.“Form”.“Passpor ...

  5. goweb-搭建服务

    web应用简介 Web 应用在我们的生活中无处不在.看看我们日常使用的各个应用程序,它们要 么是 Web 应用,要么是移动 App 这类 Web 应用的变种.无论哪一种编程语言,只要 它能够开发出与人 ...

  6. 清新三角格子风工作报告季度总结年终汇报通用PPT模板

    选好合适的PPT模板,确定好主题,一个漂亮的PPT首先要简洁,其次文字不要太多,能用图片或视频讲解的最好用图片或视频.做好ppt后,对于讲解演示,也要提前做好练习准备. 模版来源:http://ppt ...

  7. 代码审计 => 74cms_v3.5.1.20141128 一系列漏洞

    0x01 前言 最近开始在学习代码审计了,以前几次学习代码审计都因为不知道如何下手,和代码的复杂就放弃了,这一次算是真正的认真学习,同时seay所编写的<代码审计 企业级Web代码安全架构> ...

  8. JS 语句

    JS 语句 JavaScript 语句 JavaScript 语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么. 下面的 JavaScript 语句向 id="demo" 的 ...

  9. 【python3基础】python3 神坑笔记

    目录 os 篇 os.listdir(path) 运算符篇 is vs. == 实例 1:判断两个整数相等 实例 2:argparse 传参 实例 3:np.where 命令行参数篇 Referenc ...

  10. 点击element-ui表格中的图标，上方显示具体的文字描述

    <template> <el-table :data="tableData" style="width: 100%"> <el-t ...