Vue 基础 day05 webpack 3.x

什么是webpack

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

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

webpack安装的两种方式

$ npm install webpack -g 全局安装
$ npm install webpack --save-dev 下载开发版本
$ npm install wabpack@3.8.1  下载指定版本

使用webpack 打包构建隔行变色案例

运行 npm init 初始化项目, 使用 npm 管理项目中的依赖包;
创建项目基本目录
使用 npm install jquery --save 安装类库
创建main.js 书写隔行变色案例

import $ from 'jquery'
$('#list li:even').css('backgroundColor', 'red');
$('#list li:odd').css('backgroundColor', 'yellow');

直接在 index.html 中引用会报错, 因为浏览器不认识 import 这种高级的js语法, 需要使用webpack进行处理, webpack默认会把这种高级的语法转换为浏览器可以识别的语法;
运行命令 webpack 入口文件路径输出文件路径

$ webpack ./src/main.js ./dist/bundle.js

此时引入打包好的文件就可以使用啦

使用 webpack 的配置文件简化打包命令

在项目根目录下创建 webpack.config.js
由于运行 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 文件

安装 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

在 scripts 键下在增加一个键

"dev": "webpack-dev-server"
补充:
    --open            自动打开浏览器
    --port 3000       指定浏览器端口
    --contentBase src 指定打开路径
    --hot             热重载, 热更新
webpack-dev-server --open --port 3000 --contentBase src --hot

cmd 下执行

$ npm run dev

配置 webpack.config.js 文件

配置文件下新增键值对

devServer: {
  open: true,
  port: 3000,
  contentBase: 'src',
  hot: true
}

导入 webpack 包

const webpack = require('webpack')

配置文件下新增键值对

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

package.json 的 scripts 下新增一个键

"dev": "webpack-dev-server"

使用 html-webpack-plugin 插件把 html 放到内存中去

下载 html-webpack-plugin 插件

$ npm install html-webpack-plugin -D

在 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 中的路径

下载依赖 url-loader 也可以处理字体文件

$ npm install url-loader file-loader -D

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)

安装 babel 相关的 loader 包

$ npm install babel-loader babel-core babel-plugin-transfrom-runtime -D

安装 babel 转换语法相关的包

$ npm install babel-preset-env babel-preset-stage-0 -D

webpack.config.js 中增加配置项

module.exports = {
  module: {
    rules: [
      { path: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

项目的根目录下增加一个 .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

什么是webpack

webpack安装的两种方式

使用webpack 打包构建隔行变色案例

使用 webpack 的配置文件简化打包命令

使用 webpack 打包的两种方式

配置 package.json 文件

配置 webpack.config.js 文件

使用 html-webpack-plugin 插件把 html 放到内存中去

使用第三方插件打包 JS 以外的资源文件

处理打包 css 文件

处理打包 less 文件

处理打包 scss 文件

配置文件中配置这些资源

处理 css 中的路径

使用 babel 处理高级的 js 语法

补充: 自己在安装的时候, 遇到的问题

相关文章

最新文章

热门文章

巴特西

Vue 基础 day05 webpack 3.x

什么是webpack

webpack安装的两种方式

使用webpack 打包构建隔行变色案例

使用 webpack 的配置文件简化打包命令

使用 webpack 打包的两种方式

配置 package.json 文件

配置 webpack.config.js 文件

使用 html-webpack-plugin 插件 把 html 放到 内存中去

使用 第三方插件打包 JS 以外的资源文件

处理 打包 css 文件

处理 打包 less 文件

处理 打包 scss 文件

配置文件中 配置这些 资源

处理 css 中的路径

使用 babel 处理高级的 js 语法

补充: 自己在安装的时候, 遇到的问题

相关文章

最新文章

热门文章

使用 html-webpack-plugin 插件把 html 放到内存中去

使用第三方插件打包 JS 以外的资源文件

处理打包 css 文件

处理打包 less 文件

处理打包 scss 文件

配置文件中配置这些资源