webpack

1. 在网页中会引用哪些常见的静态资源？

  1. 样式表

    • .css .less .scss

  2. JS文件

    • .js .ts

  3. 图片

    • .jpg/.jpeg .png .gif .bmp .webp【webp的图片，在苹果手机的浏览器中显示不出来】

  4. 字体文件

    • .ttf .eot .woff .woff2 .svg

  5. 模板文件

    • .vue .jsx 

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

  1. 对网页性能不友好：要发起很多的静态资源请求，降低页面的加载效率，用户体验差；

  2. 对程序开发不友好：前端程序员要处理复杂的文件之间的依赖关系； 

3. 如何解决上述两个问题

  1. 对于 JS 文件 或 CSS 文件，可以合并和压缩；小图片适合转 Base64 格式的编码；

  2. 通过一些工具，让工具自动维护文件之间的依赖关系； 

4. 什么是webpack?

  • 什么是webpack：webpack 是前端项目的构建工具；前端的项目，都是基于 webpack 进行 构建和运行的；

  • 什么项目适合使用webpack：

    • webpack 非常适合与单页面应用程序结合使用；

    • 不太适合与多页面的普通网站结合使用；

  • 为什么要使用webpack:

    1. 如果项目使用 webpack 进行构建，我们可以书写高级的ES代码，且不用考虑兼容性；

    2. webpack 能够优化项目的性能；

    3. 基于webpack，程序员可以把 自己的开发重心，放到功能上；

  • 根据官网的图片介绍webpack打包的过程

  • webpack官网

  • webpack分很多版本 1.x 2.x 3.x 4.x 

5. 在项目中安装和配置webpack

webpack 是前端的一个工具，这个工具，已经被托管到了NPM官网上；

  1. 新建一个项目的空白目录，并在在终端中，cd到项目的根目录，执行npm init -y 初始化项目

  2. 装包：运行 cnpm i webpack webpack-cli -D 安装项目构建所需要的 webpack

  3. 打开 package.json文件，在 scripts 节点中，新增一个 dev 的节点：

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack"
      },
     

  4. 在项目根目录中，新建一个 webpack.config.js 配置文件，内容如下：

    // 这是 使用 Node 语法， 向外导出一个 配置对象
    module.exports = {
      mode: 'production' // production    development
    }
     

  5. 在项目根目录中，新增一个 src 目录，并且，在 src 目录中，新建一个 index.js 文件，作为 webpack 构建的入口；会把打包好的文件输出到 dist -> main.js

  6. 在终端中，直接运行 npm run dev 启动webpack进行项目构建；

 

6. 实现webpack的实时打包构建

  1. 借助于 webpack-dev-sever 这个工具，能够实现 webpack 的实时打包构建；

  2. 运行cnpm i webpack-dev-server -D 安装包

  3. 打开package.json文件，把 scripts 节点下的 dev 脚本，修改为如下配置：

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
      },
     

  4. 修改 index.html 文件中的 script 的 src, 让 src 指向 内存中根目录下的 /main.js

    <script src="/main.js"></script>

7. 使用html-webpack-plugin插件配置启动页面

  1. 装包`cnpm i html-webpack-plugin -D `

  2. 在 webpack.config.js中，导入 插件：

    // 导入 html-webpack-plugin，从而帮我们自动把 打包好的 main.js 注入到 index.html 页面中
    // 同时，html-webpack-plugin 可以把 磁盘上的 index.html 页面，复制一份并托管到 内存中；
    const HtmlPlugin = require('html-webpack-plugin')
    const htmlPlugin = new HtmlPlugin({
      // 传递一个配置对象
      template: './src/index.html', // 指定路径，表示 要根据哪个物理磁盘上的页面，生成内存中的页面
      filename: 'index.html' // 指定，内存中生成的页面的名称
    })
     

  3. 把 创建好的 htmlPlugin 对象，挂载到 plugins数组中：

    // webpack 这个构建工具，是基于 Node.js 开发出来的一个前端工具
    module.exports = {
      mode: 'development', // 当前处于开发模式
      plugins: [htmlPlugin] // 插件数组
    }

8. 实现自动打开浏览器、热更新和配置浏览器的默认端口号

  • --open 自动打开浏览器

  • --host 配置IP地址

  • --port 配置 端口号

  • --hot 热更新；最新的代码，以打补丁的形式，替换到页面上，加快编译的速度；

  • --progress 展示编译的进度

  • --compress 对网络中传输的文件进行压缩，提高传输效率；

 

9. 打包处理非js文件

9.1 使用webpack打包css文件

  1. 运行 cnpm i style-loader css-loader -D

  2. 打开 webpack.config.js 配置文件，在 module -> rules 数组中，新增处理 css 样式表的loader规则：

     
    module: { // 所有 非.js 结尾的第三方文件类型，都可以在 module 节点中进行配置
        rules: [ // rules 是匹配规则，如果 webpack 在打包项目的时候，发现，某些 文件的后缀名是 非 .js 结尾的
          //  webpack 默认处理不了，此时，webpack 查找 配置文件中的 module -> rules 规则数组；
          { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
      }

9.2 使用webpack打包less文件

  1. 运行 cnpm i less-loader less -D

  2. 在 webpack 的配置文件中，新增一个 rules 规则来 处理 less 文件：

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

9.3 使用webpack打包sass文件

  1. 运行 cnpm i sass-loader node-sass -D

  2. 在 webpack 的配置文件中，新增一个 rules 规则来 处理 scss文件：

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

     

9.4 使用webpack处理css中的路径

  1. 运行 cnpm i url-loader file-loader -D

  2. 在 webpack 的配置文件中，新增一个 rules 规则来 处理 图片 文件：

    { test: /\.jpg|png|gif|bmp$/, use: 'url-loader' }

9.5 使用babel处理高级JS语法

  1. 之前说过，webpack 默认能够打包处理一些ES6中的高级语法；但是，webpack 并不能处理所有的高级ES6、ES7语法；

  2. 运行两套命令，去安装相关的 loader:

    • 运行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

    • 运行 cnpm i babel-preset-env babel-preset-stage-0 -D

  3. 添加 babel-loader 配置项：

    // 注意：在配置 babel-loader 的时候，一定要添加 exclude 排除项，把 node_modules 目录排除
    // 这样，只让 babel-loader 转换 程序员 自己手写的 JS 代码；
    // 好处：1. 能够提高编译的转换效率； 2. 能够防止不必要的报错！
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
     

  4. 在项目根目录中，添加 .babelrc 配置文件：

    {
      "presets": ["env", "stage-0"],
      "plugins": ["transform-runtime"]
    }

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.6",
    "webpack-dev-server": "^3.1.4"
     

     

posted on 2018-12-17 15:54  Itwangchen  阅读(152)  评论(0)    收藏  举报

导航