什么是webpack

webpack 是前端的一个项目构建工具, 它是基于 Node.js 开发出来的一个前端工具

借助于webpack这个前端自动化构建工具, 可以完美实现资源的合并、打包、压缩、混淆等诸多功能

webpack安装的两种方式
$ npm install webpack -g 全局安装
$ npm install webpack --save-dev 下载开发版本
$ npm install wabpack@3.8.1  下载指定版本
使用webpack 打包构建隔行变色案例
  1. 运行 npm init 初始化项目, 使用 npm 管理项目中的依赖包;
  2. 创建项目基本目录
  3. 使用 npm install jquery --save 安装类库
  4. 创建main.js 书写隔行变色案例
import $ from 'jquery'
$('#list li:even').css('backgroundColor', 'red');
$('#list li:odd').css('backgroundColor', 'yellow');
  1. 直接在 index.html 中引用会报错, 因为浏览器不认识 import 这种高级的js语法, 需要使用webpack进行处理, webpack默认会把这种高级的语法转换为浏览器可以识别的语法;
  2. 运行 命令 webpack 入口文件路径 输出文件路径
$ webpack ./src/main.js ./dist/bundle.js
  1. 此时引入打包好的文件就可以使用啦
使用 webpack 的配置文件简化打包命令
  1. 在项目根目录下创建 webpack.config.js
  2. 由于运行 webpack 命令的时候, webpack 需要指定入口文件和输出文件的路径, 所以我们需要在 webpack.config.js 中配置这两个路径;
// 导入路径模块
const path = require('path')
// 导出一个配置对象, 将来webpack在启动的时候, 会默认查找webpack.config.js, 并读取这个文件中的配置对象, 来进行打包处理
module.exports = {
  entry: path.join(__dirname, '/src/main.js'), // 项目入口文件
  output: { // 配置出口选项
    path: path.join(__dirname, '/dist'), // 配置输出路径
    filename: 'bundle.js' // 配置输出文件
  }
}
使用 webpack 打包的两种方式
配置 package.json 文件
  1. 安装 webpack-dev-server 工具
$ npm install webpack-dev-server -D
$ npm install webpack-dev-server@2.9.3 -D

注意: 

1. webpack-dev-server 会在项目的根目录下虚拟一个bundle.js, 注意引用 

2. webpack-dev-server 依赖于 webpack 所以 一定要安装 webpack

  1. 在 scripts 键下 在增加一个键
"dev": "webpack-dev-server"
补充:
    --open            自动打开浏览器
    --port 3000       指定浏览器端口
    --contentBase src 指定打开路径
    --hot             热重载, 热更新
webpack-dev-server --open --port 3000 --contentBase src --hot
  1. cmd 下执行
$ npm run dev
配置 webpack.config.js 文件
  1. 配置文件下新增 键值对
devServer: {
  open: true,
  port: 3000,
  contentBase: 'src',
  hot: true
}
  1. 导入 webpack 包
const webpack = require('webpack')
  1. 配置文件下 新增键值对
plugins: [
    new webpack.HotModuleReplacementPlugin()
]
  1. package.json 的 scripts 下 新增一个键
"dev": "webpack-dev-server"
使用 html-webpack-plugin 插件 把 html 放到 内存中去
  1. 下载 html-webpack-plugin 插件
$ npm install html-webpack-plugin -D
  1. 在 config.webpack.js 中增加配置项

注意: 只要是插件 就放到 plugins 组件中

// 1. 在内存中创建模板
// 2. 不需要引用 bundle.js 文件
// 3. 把打包好的 bundle.js 文件 自动追加到 html 页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new htmlWebpackPlugin({ // 创建 插件
      template: path.join(__dirname, '/src/index.html'), // 指定模板页面, 会根据路径生成到内存中去
      filename: 'index.html' // 模板文件
    })
  ]
}
使用 第三方插件打包 JS 以外的资源文件

webpack 默认之鞥呢处理打包 js 文件 如果需要处理其他文件, 需要手动安装一些 loader 加载器

处理 打包 css 文件
$ npm inatll style-loader css-loder -D
处理 打包 less 文件
$ npm install less-loader less -D
处理 打包 scss 文件
$ npm install sass-loader node-sass -D
配置文件中 配置这些 资源
module.exports = {
  module: { // 这个节点 用于配置 所有第三方模块加载器
    rules: [ // 所有的第三方模块匹配规则
      // 配置处理 css 匹配规则
      {test: '/\.css$/', use: ['style-loader', 'css-loader']},
      // 配置处理 less 匹配规则
      {test: '/\.less$/', use: ['style-loader', 'css-loader', 'less-loader']},
      // 配置出路 scss 匹配规则
      {test: '/\.scss$/', use: ['style-loader', 'css-loader', 'sass-loader']}
    ]
  }
};
处理过程:
    1. 发现要处理的文件不是 js 文件, 然后去配置文件中查找, 有没有对应的第三方 loader 规则
    2. 如果有, 就会调用对应的 loader 处理这种文件类型
    3. 在调用 loader 的时候, 从右往左调用
    4. 最后的 loader 调用完毕, 会把最后的结果交给 webpack 打包合并, 最终输出到 bundle.js 中
处理 css 中的路径
  1. 下载依赖 url-loader 也可以处理字体文件
$ npm install url-loader file-loader -D
  1. rules 下 新增一个配置项

注意: 参数拼接和get请求拼接一致

// 通过limit指定进行base64编码图片大小, 小于图片字节就会进行base64编码
{ test: '/\.(jpg|png|gif)$/', use: 'url-loader?limit=1024' }
// 小于1024编码为base64, hash8位字符 拼接 原图片名以及后缀名
limit=1024&[hash:8]-[name].[ext]
使用 babel 处理高级的 js 语法

webpack 默认只是支持部分 ES6 的语法, 并不是全部支持, 所以我们需要下载一些工具, 来支持更高的 JS 语法 (ES6, ES7)

  1. 安装 babel 相关的 loader 包
$ npm install babel-loader babel-core babel-plugin-transfrom-runtime -D
  1. 安装 babel 转换语法相关的包
$ npm install babel-preset-env babel-preset-stage-0 -D
  1. webpack.config.js 中 增加配置项
module.exports = {
  module: {
    rules: [
      { path: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}
  1. 项目的根目录下 增加一个 .babelrc 文件 此文件必须遵循 json 规范
{
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}
补充: 自己在安装的时候, 遇到的问题

按照以上命令执行完毕后, 重新启动项目 发现报错了, 最后看报错信息得知, 是因为 babel-loader 的版本下高了 最后按照提示, 下载了底一个版本的 babel-loader 就可以重新启动项目了;

相关文章

babel-preset-env:你需要的唯一Babel插件
Runtime transform 运行时编译es6

Vue 基础 day05 webpack 3.x的更多相关文章

  1. Vue 基础 day06 webpack 3.x 结合vue

    在普通页面使用 render 函数渲染组件 var login = { template: '<h3>login</h3>' } var vm = new Vue({ // c ...

  2. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

  3. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

  4. Vue工程模板文件 webpack打包

    1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.c ...

  5. Vue基础项目模板

    https://github.com/wanglong/vue-element-admin.git 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍 一站式开源运维平台,分享给大 ...

  6. vue - vue基础/vue核心内容

    终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...

  7. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...

  8. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

随机推荐

  1. P4315 月下“毛景树” (树链剖分+边剖分+区间覆盖+区间加+区间最大值)

    题目链接:https://www.luogu.org/problem/P4315 题目大意: 有N个节点和N-1条树枝,但节点上是没有毛毛果的,毛毛果都是长在树枝上的.但是这棵“毛景树”有着神奇的魔力 ...

  2. 为什么我选择用 flutter

    1. flutter 生成的是机器代码,他既不是 hybrid 也不是transpiler,  因此有很高的执行效率. 2. declarative ui,这不是什么新的概念,在 react vue ...

  3. vue-router解析,vue-router原理解析

    前言:新一季面试季,重新整理一些知识点: 本文详细说明自己对vue-router原理的理解: 参考: 源码:vuejs/vue-router v2.2.1 - github 文档:vue-router ...

  4. Oracle 9i,10g,11g各自alert日志的位置

    10g&9i的alert日志: 进入oracle:[zhangshengdong@oralocal1 ~]$ sudo su - oracle[oracle@oralocal1 ~]$ sql ...

  5. 【leetcode】1160. Find Words That Can Be Formed by Characters

    题目如下: You are given an array of strings words and a string chars. A string is good if it can be form ...

  6. iOS Core Image-----十行代码实现微信朋友圈模糊效果

    昨天下午微信的朋友圈着实火了一把,在这之后好多程序员都通过抓包工具看到了原图,但是我却在想,网上说是在移动前端做到的那是怎么做到的呢,经过一些学习,终于掌握了一些Core Image的知识,做出了相应 ...

  7. iOS 指定位置切圆角不生效问题

    如果是在VC中操作,需要在viewDidLayoutSubviews方法里 - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; ...

  8. 错误: 找不到或无法加载主类 org.sang.BlogserverApplication

    错误: 找不到或无法加载主类 org.sang.BlogserverApplication

  9. 总结PHP缓存技术的多种方法

    这里所说的数据缓存是指数据库查询PHP缓存机制,每次访问页面的时候,都会先检测相应的缓存数据是否存在,如果不存在,就连接数据库,得到数据,并把查询结果序列化后保存到文件中,以后同样的查询结果就直接从缓 ...

  10. 面向对象this关键字和概述和应用

    面向对象this关键字和概述和应用 package thisdemo; /** * 面向对象this关键字和概述和应用 * */ //定义老师类 class Teacher { private Str ...