webpack

·  阅读 69
  • webpack是什么

    webpack其实就是一个JavaScript应用程序的静态模块打包器。

  • webpack有什么作用

    模块化打包:

            webpack会将项目的资源文件当成一个一个模块,模块之间会有依赖关系,
            webpack将会对这些有依赖关系的文件进行处理,让浏览器能够识别,
            最后将应用程序需要的每个模块打包成一个或者多个bundle
    复制代码

安装node

-   node官网地址:<<https://nodejs.org/zh-cn/>

创建package.json文件
 
-   命令:npm init

安装webpack
 
-   本地安装:(推荐)

    npm install --save-dev webpack

    npm install --save-dev webpack-cli

-   全局安装:

    npm install --global webpack webpack-cli
复制代码

打包

默认entry入口 src/index.js

默认output出口 dist/main.js
 

-   打包模式:

    webpack --mode development

    webpack --mode production

-   Package.json文件下添加scripts !
复制代码
  • 设置好后在命令行程序中运行npm run dev或者npm run build来进行打包。

webpack核心配置config文件的初使用

  1. 新建一个webpack.config.js

  2. 配置入口entry(所需打包的文件路径) 

  3. 配置出口output (1)path指文件打包后的存放路径
    (2)path.resolve()方法将路径或路径片段的序列处理成绝对路径
    (3)__dirname 表示当前文件所在的目录的绝对路径
    (4)filename是打包后文件的名称\

  4. 命令行程序运行npm run dev或者npm run build

webpack常用配置之入口entry和出口output的进阶用法

简介:讲解入口和出口的多文件用法

  • 入口entry
    • 单入口

      • 单文件
        例如: entry:‘./src/index.js’

      • 多文件
        在你想要多个依赖文件一起注入,并且将它们的依赖导向到一个“chunk”时,传入数组的方式就很有用
        例如:entry:[‘./src/index.js’,‘./src/index1.js’]

    • 多入口
      例如:

entry:{
        pageone:"./...",
        pagetwo:"./...",
        pagethree:"./..."
      }
复制代码
  • 出口output

-   单出口
复制代码
output:{
    path:path.resolve(_dirname,'dist'),
    filename:'bundle.js'
}
复制代码

-   多出口
复制代码
output:{
    path:path.resolve(_dirname,'dist'),
    filename:'[name].js'
}
复制代码

开发调试必备配置

本地服务器webpack-dev-server的搭建

  1. 了解webpack-dev-server

    webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

    webpack-dev-server 主要提供两个功能:

    (1)为静态文件提供服务

    (2)自动刷新和热替换(HMR)

  2. 安装webpack-dev-server 

    npm install --save-dev webpack-dev-server

image.png  

  1. 配置webpack.config.js文件     image.png

  2. 配置package.json

image.png

    "scripts": {
        "start": "webpack-dev-server --mode development"
    }  
复制代码
  1. 在build文件夹下新建index.html文件,在html中引入main.js

image.png

  1. 在命令行程序运行npm run start

    自动弹出页面,控制台有输出信息

image.png

webpack加载css所需loader及其使用方式

  • 了解loader

    • loader让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
  • 安装loader

    • 安装style-loader和css-loader

      下载:

      npm install style-loader css-loader --save-dev

  • 配置loader

    • 在webpack.config.js文件里配置module中的rules

      在 webpack 的配置中 loader 有两个目标:

      1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
      2. use 属性,表示进行转换时,应该使用哪个 loader。
        image.png

style-loader必须放在css-loader之前

  • 创建css文件并运行命令

    • 创建index.css文件并import进index.js文件中

webpack如何编译less和sass文件

less

  • 安装loader

    • 安装less-loader和less

      下载:

      npm install less-loader less --save-dev

  • 配置loader

image.png

sass

  • 安装loader

    • 安装sass-loader和node-sass

      下载:

      npm install sass-loader node-sass --save-dev

  • 配置loader

image.png

使用PostCSS处理浏览器前缀(兼容生效)

(1)处理效果  

image.png

(2)安装loader

安装postcss-loader和autoprefixer

下载:

npm install --save-dev  postcss-loader autoprefixer

(3)配置loader

需要和autoprefixer一起用

浏览器设置:

Loader中设置:

image.png

或者在package.json里加上下图设置:

image.png

文件处理

1. 图片处理

(1)安装loader

下载安装file-loader

npm install --save-dev file-loader

(2)配置config文件

  image.png

(3)选项配置

   image.png

配置options:

name:为你的文件配置自定义文件名模板(默认值[hash].[ext])

context:配置自定义文件的上下文,默认为 webpack.config.js

publicPath:为你的文件配置自定义 public 发布目录

outputPath:为你的文件配置自定义 output 输出目录

[ext]:资源扩展名

[name]:资源的基本名称

[path]:资源相对于 context的路径

[hash]:内容的哈希值

2. 字体文件处理

(1)下载字体文件

以bootstrap字体文件为例子

Boostrap字体文件下载地址:v3.bootcss.com/getting-sta…

(2)在index.js中引入bootstrap.css,在html中使用bootstrap字体图标

(3)配置config文件

image.png

3. 第三方 js库处理

 以jquery库为例子

(1)本地导入

编写配置文件:

webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

如果webpack配置了resolve.alias选项(理解成“别名”),那么webpack.ProvidePlugin就会顺着设置的路径一直找下去  

使用webpack.ProvidePlugin前需要引入webpack

image.png

image.png  

(2)npm安装模块

安装jquery库:

npm install jquery --save-dev

直接在js里import引入

Import $ from‘jquery’

编译es6

1. 了解babel

目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善。为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具

image.png

babel转化语法所需依赖项:

babel-loader: 负责 es6 语法转化

babel-core: babel核心包

babel-preset-env:告诉babel使用哪种转码规则进行文件处理

2. 安装依赖

npm install babel-loader @babel/core @babel/preset-env --save-dev

3. 配置config文件

exclude表示不在指定目录查找相关文件

image.png

4. 根目录新建 .babelrc 文件配置转换规则

image.png

5. 另一种规则配置

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改