webpack的基础使用

原视频地址

创建列表隔行变色效果

1.基本操作：

1.新建项目空白目录（不能叫webpack!!!），运行npm init -y 命令，初始化管理配置文件 package.json。

在 vscode 中按快捷键 ctrl+` 可打开终端

2.新建src目录，此目录下新建 index.html，初始首页

index.html文件内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    // 执行 ul>li{这是第$个li}*9 命令，快速创建li
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>
<script src='./index.js'></script>
</html>

3.运行npm i jquery -S,安装jquery

4.通过模块化的形式，实现隔行变色效果

index.js文件内容:

// jquery大小写不影响
import $ from 'jQuery'

// odd选择器匹配索引值为奇数的元素，从0开始计数
// even选择器匹配所有索引值为偶数的元素，从0开始计数
$(function(){
    $('li:odd').css('backgroundColor','pink')
    $('li:even').css('backgroundColor','lightblue')
})

运行后发现并不能正确实现效果并且报错，原因在于 index.js 文件的首行代码是es6的模块化语法，浏览器对这种语法不能很好的识别。

解决方法：
把代码转换成没有兼容性的代码，在index.html文件中导入转换之后的<script src='xxx'></script>代码。

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

1.运行npm install webpack webpack-cli -D命令，安装 webpack 相关的包

2.在项目根目录中创建名为 webpack.config.js 的 webpack 配置文件

3.在 webpack 的配置文件中，初始化如下基本配置：

module.exports = {
        mode: 'development'  // mode 用来制定构建模式
}

mode - development/production
开发阶段值尽量都设为 development

4.在 package.json 配置文件中的script 节点下，新增 dev 脚本如下：

"scripts": {
"dev": "webpack"  // script节点下的脚本，可以通过 npm run 执行
}

5.在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。打包完成可见根目录新建 dist\main.js，记得修改 index.html 中的js路径。

3.配置打包的入口与出口

webpack 的 4.x 版本中默认约定：

  • 打包的入口文件为 src\index.js
  • 打包的输出文件为 dist\main.js

如果要修改打包的入口和出口，可在 webpack.config.js 中新增如下配置信息：

const path = require('path') //导入node.js中专门操作路径的模块
module.exports = {
    entry: path.join(__dirname, './src/index.js'),  //打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'),  //输出文件的存放路径
        filename: 'bundle.js'  //输出文件的名称
    }
}

4.配置自动打包的功能

打包完成后如果需要修改css效果或是其他代码，修改后直接刷新浏览器是不成功的，需要重新打包再执行，非常麻烦，所以在这里配置 webpack 的自动打包功能。
接上，先 ctrl+c停掉自动打包。

1.运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具

2.修改package.json->scripts 中的 dev 命令如下：

      "dev":  "webpack-dev-server"

webpack-dev-server会启动一个实时打包的http服务器

3.将src\index.html中的script脚本引用路径改为 bundle.js：

<script src='/bundle.js'></script>

3.运行npm run dev 命令，重新进行打包（打包后不会退出终端，而是等待着代码的改变

4.在浏览器中访问 http://localhost:8080/ 查看自动打包效果

5.配置生成预览页面

进入http://localhost:8080/后看到的是根目录，需要点击手动进入index.html，所以配置使点击直接进入index.html。

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'  //指定生成的文件名称，该文件存在于内存中，在目录中不显示
})

3.修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = {
    plugins:[ htmlPlugin ]  // plugin 数组是 webpack 打包期间会用到的一些插件列表
}

4.重新执行npm run dev命令，进入http://localhost:8080/查看效果

6.配置自动打包的相关参数

运行npm run dev后需要手动复制浏览器地址才能查看页面，修改使运行后自动弹出页面。

//package.json中的配置
// --open 打包完成后自动打开浏览页面
// --host 配置 ip 地址
// --port 配置端口
"script": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --post 8888"
}

7.webpack中的加载器

在实际开发过程中， webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他模块默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错。
loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

  • less-loader 可以打包处理 .less 相关的文件
  • sass-loader 可以打包处理 .scss 相关的文件
  • url-loader 可以打包处理 css 中与 url 路径相关的文件

打包处理 css 文件

  1. 运行npm i style-loader css-loader -D命令，安装处理 css 文件的loader

2.在 webpack .config.js 的 module->rules 数组中，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
module: {
    rules: [
        { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }    
]
}
  • 其中， test 表示匹配的文件类型， use 表示对应要调用的 loader
  • use 数组中指定的 loader 顺序是固定的

省略了在src/css中写css文件内容及 index.js 中import css文件的步骤，下面也都省略了奥~

打包处理less文件

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

2.在 webpack.config.js 的 module->rules 数组中，添加 loader 规则如下：

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

打包处理scss文件

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

2.在 webpack.config.js 的 module->rules 数组中，添加 loader 规则如下：

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

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

1.运行npm i postcss-loader autoprefixer -D

2.在项目根目录中创建 postcss 的配置文件 postcss.config.js ，并初始化如下配置：

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件
module.exports = {
    plugins: [autoprefixer] //挂载插件
}

3.在 webpack.config.js 的module->rules 数组中，修改（不是添加） css 的 loader 规则如下：

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

9.打包样式表中的图片和字体文件

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

  1. webpack.config.js 的 module->rules 中添加loader规则：
{ test: /\.jpg|png|gif|bmp|ttf|svg|woff|woff2$/, use: 'url-loader?limit=2147'}

limit是图片大小

10.打包处理js文件中的高级语法

如果直接在index.js文件中加上：

class Person{
     static info='aaa'
}

直接运行会报错，因为默认打包不了这种高级语法，需要配置。

1.安装babel转换器相关的包npm i babel-loader @babel/core @babel/runtime -D
2.安装babel语法插件相关的包npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中创建babel配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {
    presets: [ '@babel/preset-env' ],
    plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}

4.在 webpack.config.js 的module->rules 数组中，添加 loader 规则：

// exclude为排除项，表示 babel-loader不需要处理 node_modules 中的js文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

这样再运行就可以在控制台输出'aaa'了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • webpack使用学习
    webpack使用学习 本分享学习借鉴webpack中文官网，官网链接(中文文档)：https://www.web...
    腿毛怪丶叔叔阅读 976评论 0赞 5
  • webpack
    目录第1章 webpack简介 11.1 webpack是什么？ 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,831评论 0赞 1
  • 从0搭建自己的webpack开发环境（wepack4.0以上）
    源码地址：https://github.com/h2huanghui/WEBPACK-BASE 一、概念 webp...
    smartHui阅读 1,851评论 0赞 1
  • Gulp和Webpack的差异
    在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,676评论 1赞 32
  • 小事不小
    美的教育，决定孩子的生命质地。 同样，美的行为，可以浸润孩子的灵魂。 深以为然。 小事：今天课堂上第五小组表现极好...
    研究僧在小学阅读 426评论 0赞 5

友情链接更多精彩内容