webpack

AXIN
249 阅读4分钟

常见的静态资源

1 样式表 .css .less .sass .scss

2 脚本文件 .js .ts .coffee

3 字体文件 .eot .svg .ttf .woff .woff2

4 图片 .jpg .png .gif .bmp

5 模板文件 .vue .ejs .jade

静态资源增多的问题

1 加载速度变慢：需要发起很多二次资源请求

2 依赖问题：前后资源依赖关系，需要人为处理

解决方法

1 把一些图片合并成精灵图，把css,js合并/压缩

2 把图片转为base64的编码格式，把图片以字符串的形式展示<img src="base64:image'1122'">最大限度的减少图片的二次请求

3 使用webpack解决静态资源的依赖问题

webpack能做什么

前端项目的构建工具，提高项目的可维护性和可控制性，适合单页面应用程序

使用webpack的好处：

1 处理静态资源的依赖关系

2 能够优化文件，合并压缩css js文件，把图片转为base64的格式

3 能够把高级的语法转变为低级的语法，兼容一些版本低的浏览器

4 能够转换模板文件 比如将.vue文件转换成js文件供浏览器解析

webpack安装方式

1 全局安装 cnpm i webpack -g

2 在项目中安装 cnpm i webpack -D 安装到开发依赖比较好

创建一个项目的方式

1 初始化

npm init -y

可以使用npm init --yes命令直接使用默认的配置来创建package.json文件，最后根据需要修改创建好的package.json文件即可。

之后package.json就被创建了，默认的情况：

{
  "name": "webpack-study-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

主要字段的含义如下:

  • name: 模块名, 模块的名称有如下要求:
    • 全部小写
    • 只能是一个词语，没有空格
    • 允许使用破折号和下划线作为单词分隔符
  • version: 模块版本信息
  • description：关于模块功能的简单描述，如果这个字段为空的话，默认会从当前目录的READMD.md或README文件读取第一行内容作为它的默认值。
  • main: 模块被引入后，首先加载的文件，默认为index.js。
  • scripts: 定义一些常用命令入口

2 创建文件

文件夹 dist 放置发布版本的代码

文件夹 src 放置项目源码 src下 放置index.html 项目的主页面 以及 main.js项目的js入口文件

3 安装webpack

1 全局安装 cnpm i webpack -g

2 在项目中安装 cnpm i webpack -D 安装到开发依赖比较好

使用webpack4打包一个文件 webpack .\src\main.js -o .\dist\bundle.js --mode development

这个时候在index.html中引入<script src="../dist/bundle.js"></script> 浏览器就可以解析main.js中不识别的语法了。

4 创建webpack.config.js

根目录下创建配置文件 设置打包的文件和打包好的文件，就直接使用webpack命令打包，而不用上面的方法了。

const path = require('path')
//向外暴露配置对象
module.exports = {
  entry: './src/main.js', //要打包文件
  output: {
    path: path.join(__dirname, './dist'),  //文件存放的位置
    filename: 'bundle.js'   //文件名
  },
  mode: 'development'
}

5 配置webpack实时打包编译

cnpm i webpack-dev-server -D

cnpm i webpack-cli -D

在package.json文件的scripts处添加一行 dev

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

在index.html页面中，引入bundle.js是<script src="/bundle.js"></script>在根目录下。这个bundle文件是存放在内存中的，因为这个文件一直在变化，放在内存中可以快速响应。

这样就npm run dev 就可以实时打包编译了

6 配置html-webpack-plugin

cnpm i html-webpack-plugin -D

之后在配置文件中导入这个插件

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

并新增一个属性

 plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]

这样就可以把index.html文件也托管到内存中了

这个插件的作用：

1 能够根据给定的地址，在内存中生成一模一样的页面

2 能够在内存中生成页面，并且自动把打包好的bundle.js注入为script标签。

7 webpack-dev-server参数配置

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

配置这个参数之后 ， npm run dev 会直接打开这个index.html页面,在3000端口号,ip地址为127，--hot会只更新修改的部分，类似于打补丁打上去，而不是真个bundle都重新生成。

8 loader配置

在config.js文件中配置

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

webpack只能解析js文件，非js文件需要用loader去处理

webpack会把第三方包或者js文件，也当作模块，一起打包到bundle.js中，这样被打包的入口文件就能够正常执行了。

avatar
文章
阅读
粉丝