webpack的初步使用

完成用jquery编写的隔行变色页面

项目初始化

  1. 初始化项目文件夹生成package.json
  2. 创建src文件夹
  3. 创建项目文件,html js
  4. 下载jquery

编写文件内容

  1. 在html中编写结构
  2. 在js中使用import $ from jquery引入, 然后编写代码

进行编译

  1. 下载webpack webpack-cli 使用npm i ... -D
  2. 在根目录下创建webpack.config.js文件并写入以下初始化配置
module.exports = {
  // development为开发模式编译较快但文件大,production为生产模式,文件小但是编译比较慢
  mode: 'development'
}
  1. 在package.json里面的script里添加"dev": "webpack"
"scripts": {
 "dev": "webpack" // script 节点下的脚本,可以通过 npm run 执行
}

执行文件

  1. 运行npm run dev 会自动生成dist文件夹,里面就是编译后的js文件
  2. 在html里面引入dist里编译后的js文件
  3. 打开页面即可

webpack配置打包的入口和出口

配置入口出口信息

  1. 在webpack.config.js文件中配置信息
    • 导入path模块,用来设置路径信息
      const path = require('path')
      
    • 添加入口出口信息
      module.exports = {
        mode: 'development',
        //打包入口文件路径
        entry: path.join(__dirname, './src/index.js'),
        output: {
          //打包出口路径,输出文件存放路径
          path: path.join(__dirname, './dist'),
          //输出的文件
          filename: 'bundle.js'
        }
      }
      
  2. 在index.html中引入bundle.js文件

自动打包

  1. 使用npm install webpack-dev-server –D 下载自动打包工具 webpack-dev-server会自动开启一个实时打包的服务器
  2. 修改package.json文件中的配置
"scripts": {
    // "dev": "webpack"
    // 修改为下面形式
    "dev": "webpack-dev-server"
  }
  1. 将index文件引用的js路径修改为"/bundle.js"
  2. 运行npm run dev指令,终端不会主动退出,等待你代码改变会立刻进行编译
  3. 可以在浏览器中输入http://localhost:8080 来查看打包后的效果 可以看到有自己家里的文件夹,直接输入http://localhost:8080/src/index.html可以看到页面
    输入http://localhost:8080/bundle.js可以看到编译后的文件,他虽然是在根目录下,但是是在内存中所以文件夹中不显示。
  4. 自动打包的一些配置
// package.json中的配置
// --open 打包完成后自动打开浏览器页面
// --host 配置 IP 地址
// --port 配置端口
"scripts": {
  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},

使用html-webpack-plugin插件显示指定页面

  1. 运行 npm install html-webpack-plugin –D 命令,安装生成预览页面的插件
  2. 修改 webpack.config.js 文件头部区域,添加如下配置信息:
// 导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
  template: './src/index.html', // 指定要用到的模板文件
  filename: 'index.html' // 指定生成的文件的名称,该文件存在于内存中,在目录中不显示
})
  1. 修改 webpack.config.js 文件中向外暴露的配置对象,新增如下配置节点
module.exports = {
  plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
}

加载器的使用

打包处理css文件

  1. 运行 npm i style-loader css-loader -D 命令,安装处理 css 文件的 loader
  2. 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下
// 所有第三方文件模块的匹配规则
module: {
  rules: [
    // 其中,test 表示匹配的文件类型, use 表示对应要调用的 loader
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}

use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是:从后往前调用 3. 在src文件夹里建立css文件夹,建立css文件 4. 编写css样式 5. 在index.js文件里使用import引入

import './css/index.css'
  1. 重新启动命令

处理less文件

步骤与处理css不同的地方 运行 npm i less-loader less -D 命令
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下

// 所有第三方文件模块的匹配规则
module: {
  rules: [
    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
  ]
}

处理scss文件

步骤与处理css不同的地方
运行 npm i sass-loader node-sass -D 命令
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下

// 所有第三方文件模块的匹配规则
module: {
  rules: [
    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
  ]
}

配置 postCSS 自动添加 css 的兼容前缀

  1. 运行 npm i postcss-loader autoprefixer -D 命令
  2. 在项目根目录中创建 postcss 的配置文件 postcss.config.js,并初始化如下配置:
const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
  plugins: [ autoprefixer ] // 挂载插件
}
  1. 在 webpack.config.js 的 module -> rules 数组中,修改 css 的 loader 规则如下
module: {
  rules: [
    { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
  ]
}

打包图片和字体文件

  1. 运行 npm i url-loader file-loader -D 命令
  2. 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module: {
  rules: [
    {
      test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
      use: 'url-loader?limit=16940'
      // 其中 ? 之后的是 loader 的参数项。
      // limit 用来挃定图片的大小,单位是字节(byte),只有小于 limit 大小的图片,才会被转为 base64 图片
    }
  ]
}

打包处理js中的高级语法

  1. 安装babel转换器相关的包:
    npm i babel-loader @babel/core @babel/runtime -D
  2. 安装babel语法插件相关的包:
    npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D
  3. 在项目根目录中,创建 babel 配置文件 babel.config.js 并初始化基本配置如下
module.exports = {
  presets: [ '@babel/preset-env' ],
  plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposalclass-properties' ]
}
  1. 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
// exclude 为排除项,表示 babel-loader 不需要处理 node_modules 中的 js 文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

打包处理vue单组件文件

配置加载器
  1. 运行 npm i vue-loader vue-template-compiler -D 命令
  2. 在 webpack.config.js 配置文件中,添加 vue-loader 的配置项如下
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  module: {
    rules: [
      // ... 其它规则
      { test: /\.vue$/, loader: 'vue-loader' }
    ]
  },
  plugins: [
    // ... 其它插件
    new VueLoaderPlugin() // 请确保引入这个插件!
  ]
}
在webpack项目中使用vue单组件
  1. 运行 npm i vue –S 安装 vue
  2. 在 src -> index.js 入口文件中,通过 import Vue from 'vue' 来导入 vue 构造凼数
  3. 创建 vue 的实例对象,并确定要控制的 el 区域
  4. 通过 render 凼数渲染 App 根组件
// 1. 导入 Vue 构造凼数
import Vue from 'vue'
// 2. 导入名App.vue文件的根组件
import App from './components/App.vue'
// 创建一个vue实例
const vm = new Vue({
  // 3. 确定 vm 实例要控制的页面区域
  el: '#app',
  // 4. 通过 render 凼数,把制定的组件渲染到 el 区域中
  render: h => h(App)
})

打包发布整体应用

上线之前需要通过webpack将应用迚行整体打包,可以通过 package.json 文件配置打包命令

// 在package.json文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p",
// 用于开发调试的命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
},