Vue - day5

  1. 云栖社区>
  2. 博客>
  3. 正文

Vue - day5

rlq_浅 发布时间:2018-08-20 10:35:00 浏览501 评论0

摘要: day5 - webpack 在网页中会引用那些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .

day5 - webpack

在网页中会引用那些常见的静态资源?

  • JS
    • .js .jsx .coffee .ts(TypeScript 类 C# 语言)
  • CSS
    • .css .less .sass(以前) .scss(类似于less)
  • Image
    • .jpg .png .git .bmp .svg
  • 字体文件(fonts)
    • .svg .ttf .eot .woff .woff2
  • 模板文件
    • .ejs .jade .vue(在webpack中定义组件的方式, 推荐使用)

网页中引入的静态资源多了以后有什么问题?

  1. 网络加载速度慢, 因为 我们要发起很多的二次请求;
  2. 要处理错综复杂的依赖关系

如何解决

  1. 合并、压缩、精灵图、Base64图片
  2. 可以使用之前学过的 requireJS 或者 webpack

如何完美实现上述2种解决方案

  1. 使用Gulp, 是基于 task 任务的;
  2. 使用Webpack, 是基于整个项目进行构建的;

什么是 webpack

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

webpack 是一个现代的 JavaScript 应用程序的模块 打包器(module bundler), 分析你的项目结构,找到JavaScript 模块以及其他的一些浏览器不能直接运行的拓展语言(Sass, Typescript), 并将其转换和打包为合适的格式以供浏览器使用

一切皆模块

功能: 转换 打包 合并

为什么需要webpack

现在的前端,越来越复杂,特别是SPA(single page web application)流行之后,一个应用程序往往会依赖很多其他的模块,或者编译scss、less、stylus等,如果仅仅是靠人来管理是不可能的,这个时候我们必须依赖于webpack来解决。

现在最流行的三个SPA的框架,都于webpack紧密相连。

  • React.js + webpack
  • Vue.js + webpack
  • Angular.js + webpack

学习webpack有4个重点内容:

  • 入口(entry)
  • 输出(output)
  • 加载器(loader)
  • 插件(plugins)

webpack安装

注意:请先安装node环境

npm install webpack@3.11.0 -g

建议大家这样操作(随时切换镜像源):

  1. npm install nrm -g // 安装nrm
  2. nrm ls // 查看镜像源
  3. nrm use taobao // 选择淘宝镜像,也可以选择cnpm

使用webpack

import $ from 'jquery'
//相当于
const $ = require('jquery')

import *** from *** 是ES6中导入模块的方式

01-webpack-cli

使用命令:webpack 输入文件路径 打包后文件路径将一个文件打包成另外一个文件

02-webpack-config

  1. 配置webpack.config.js

  2. 运行webpack

     var path = require('path')
     
     module.exports = {
         // 入口文件配置
         entry: "./src/app.js",
         
         // 出口文件配置项
         output: {
           // 输出的路径,webpack2起就规定必须是绝对路径
           path: path.join(__dirname, 'dist'),
           // 输出文件名字
           filename: "bundle.js"
         }
     }
    

03-webpack-dev-server

默认为--inline模式

  1. 运行:npm init -y

  2. 运行:npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D

     var path = require('path')
     
     module.exports = {
         // 入口文件配置
         entry: "./src/app.js",
         
         // 输出配置
         output: {
           // 输出的路径
           path: path.join(__dirname, 'dist'),
           // 静态资源在服务器上运行时的访问路径,可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件
           publicPath: '/dist',
           // 输出文件名字
           filename: "bundle.js"
         }
     }
    
  3. index.html中修改 <script src="/dist/bundle.js"></script>

  4. 运行:webpack-dev-server

  5. 运行:webpack-dev-server --inline --hot --open --port 8090

  6. 配置script:"dev": "webpack-dev-server --inline --hot --open --port 8090"

  7. npm run dev

webpack-dev-server 帮我们打包生成的bundle.js文件, 并没有存放到实际的 物理磁盘上; 而是直接托管到了 电脑的内存中, 所以,我们在 项目根目录中, 根本找不到 bundle.js

04-webpack-css

  1. 安装npm install css-loader style-loader --save-dev

     module: {
         rules: [
           // 配置的是用来解析.css文件的loader(style-loader和css-loader)
           {
             // 1.0 用正则匹配当前访问的文件的后缀名是  .css
             test: /\.css$/,
             use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
           }
         ]
     }
    

05-webpack-less&webpack-sass

npm install less less-loader sass-loader node-sass --save-dev

{
    test: /\.less$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'less-loader'
    }]
},


{
    test: /\.scss$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'sass-loader'
    }]
}

06-webpack-图片&字体

  1. npm install file-loader url-loader --save-dev

url-loader封装了file-loader

{
    test: /\.(png|jpg|gif)/,
    use: [{
        loader: 'url-loader',
        options: {
          // limit表示如果图片大于50000byte,就以路径形式展示,小于的话就用base64格式展示
            limit: 50000
        }
    }]
}

07-webpack-html

  1. npm install html-webpack-plugin --save-dev

  2. 如果添加了title,需要在模板中添加<%= htmlWebpackPlugin.options.title %>

     // 注意需要注释掉publicPath,不然会冲突
     
     var HtmlWebpackPlugin = require('html-webpack-plugin')
     
     plugins: [
         new HtmlWebpackPlugin({
             filename: 'index.html',
             template: 'template.html'
         })
     ]
    

08-webpack-babel

  1. npm install babel-core babel-loader babel-preset-env --save-dev

注意:

webpack 1.x | babel-loader <= 6.x

webpack 2.x | babel-loader >= 7.x (推荐) (^6.2.10 也能用, 但是会出现不推荐使用的警告)

webpack 3.x | babel-loader >= 7.1

{
  test: /\.js$/,
  // Webpack2建议尽量避免exclude,更倾向于使用include
  // exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
  include: [path.resolve(__dirname, 'src')]
  use: {
    loader: 'babel-loader',
    // options里面的东西可以放到.babelrc文件中去
    options: {
      presets: ['env']
    }
  }
}

// .babelrc文件内的配置
{
  "presets":["env"]
}

html-wabpack-plugin 插件

使用: 1.引入 2.放到plugins中配置

作用:

  1. 在内存中 生成 html 页面
  2. 能够自动把bundle.js 插入到页面中去
【云栖快讯】云栖专辑 | 阿里开发者们的20个感悟,一通百通  详情请点击

网友评论