webPack基础

webPack.jpg

webPack

中文网站

webpack ：是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

• 是一个项目构建工具，基于node.js开发的

静态资源

• JS文件

• CSS文件

• Images

• 字体文件

• 模板文件

• 静态资源文件多了以后造成的问题

  • 网页加载速度慢，发送多次请求
  • 处理包的相互关系

安装

• 1. 全局安装npm i webpack -g

• 2.在项目目录中安装npm I webpack --save-dev

• 如果在安装过程中，遇到下面的问题，一般的权限不够 需要管理员权限 sudo npm i webpack -g
  

  image.png

使用报错

• 下面警告说 mode 没有指定，可以指定值为 production 或 development，不指定默认为 production。
  同时还有一个报错，没有找到模块，不能被解析（resolve）。

• 红色的报错是 打包命令不适用的意思 ，原因是使用的webpack版本比较高原来的命令应不适应

• 解决
  webpack --mode development ./src/main.js -o ./dist/bundle.js

• 使用mode模式是 development

• 加上这个命令-o

  • 解释：把src文件夹下的main.js文件，打包压缩成 dist文件夹并生成bundle.js文件

image.png

配置文件

• 配置webpack.config.js文件

//webpack命令指向步骤
//1.webpack发现，我们没有通过命令的形式，给它指定入口和出口
//2.webpack就会去项目的根目录中，查找一个叫做：”webpack.config.js“的配置文件
//3.当找到配置文件之后，就会解析执行这个配置文件，解析执行完成后，就得到一个配置文件中导出的配置对象
//4.当webpack拿到配置对象的时候，就得到了配置对象中的指定的入口和出口，然后进行打包

var path = require("path")

//webpack配置文件
module.exports = {
    //配置文件需要指出，入口 和出口
    //入口，表示要使用webpack打包那个文件
    entry:path.join(__dirname,"./src/main.js"),
    //输入文件的相关配置
    output:{
        //指定打包好的文件，输入到那个目录中去
        path:path.join(__dirname,"./dist"),
        //指定输入文件的名称
        filename:"bundle.js"
    }
}

webpack-dev-server工具

1. npm i webpack-dev-server -D 安装这个工具到项目本地
2. 安装完毕后，这个工具的用法和webpack命令完全一样
   3.由于项目中，本地安装的webpack-dev-server，
   4.注意：webpack-dev-server这个工具，如果想要正常运行，要求没在本地项目中，必须安装webpack
   5.webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的屋里磁盘上，而是直接托管到电脑内存中，所以我们在项目跟目录中根本找不到这个打包好的bundle.js文件
   6.我们认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到项目的根目录中，虽然我们看不到它，但是可以和dist,src文件夹同级存在的

image.png

• 配置 package.json文件

{
  "name": "webPack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
//当运行 npm run dev这个命令的时候，自动打开浏览器
//定义端口 --port 3000
//--contentBase src设置根路径是src
// --hot 热更新  就是你更改文件里面代码，会生成2个局部更改的文件，一个.js，一个是.json,  
// --hot 自动刷新页面
    "dev": "webpack-dev-server --open --port 3000 --contentBase src  --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "@webpack-cli/init": "^0.1.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  },
  "description": ""
}

image.png

插件

• 我们知道使用webpack-dev-server生成的bundle.js文件是在电脑内存中存放，我们想要整个页面html放在内存中 需要安装html-webpack-plugin插件
• npm i html-webpack-plugin -D 安装插件

var path = require("path")

//启用热跟新的第2步
const webpack = require("webpack")

//导入安装的插件
const htmlWebpack = require("html-webpack-plugin")
//作用： 1.自动生成内存中根据指定页面生成的一个内存页面
//2.自动，把打包好的bundle.js文件 写入

//webpack配置文件
module.exports = {
    //配置文件需要指出，入口 和出口
    //入口，表示要使用webpack打包那个文件
    entry:path.join(__dirname,"./src/main.js"),
    //输入文件的相关配置
    output:{
        //指定打包好的文件，输入到那个目录中去
        path:path.join(__dirname,"./dist"),
        //指定输入文件的名称
        filename:"bundle.js"
    },
    //devServer 和 package.json文件中的dev配置 起到一样的作用
    //配置webpack-dev-server参数的第二种形式
    
    devServer:{
        //配置端口
        port:3000,
        //自动打开浏览器
        open:true,
        //指定根路径
        contentBase:"src",
        //热跟新 的第一步
        hot:true
    },
    

    //插件

    
    plugins:[
        //配置插件的节点
        //创建一个更新的模块对象
        new webpack.HotModuleReplacementPlugin(),
        //创建 htmlWebpack对象
        new htmlWebpack({
            //创建一个 在内存中 生成html 页面的插件
            //指定模板界面，将来根据指定的模板界面，去生成内存中的页面
            template:path.join(__dirname,"./src/index.html"),
            //指定生成页面的名称
            filename:"index.html",
            inject:"head",
            title:"插件的使用"
        })
        

    ]

 
}

loader

• webpack默认只能打包处理js类型的文件，无法处理其他的非js文件
• 如果要处理非JS文件，需要安装一些 第三方加载器 loader
• 安装 npm i style-loader css-loader -D
• 在webpack.congig.js文件中,配置一个节点，module对象，在这个对象上有一个 rules属性，是一个数组，这个数组中存放了 所有第三方文件的匹配和处理规则

// 1.导入样式表 在main.js文件中
//导入样式表
import "./css/index.css"

//2.在配置文件中 配置规则

var path = require("path")

//启用热跟新的第2步
const webpack = require("webpack")

//导入安装的插件
const htmlWebpack = require("html-webpack-plugin")
//作用： 1.自动生成内存中根据指定页面生成的一个内存页面
//2.自动，把打包好的bundle.js文件 写入

//webpack配置文件
module.exports = {
    //配置文件需要指出，入口 和出口
    //入口，表示要使用webpack打包那个文件
    entry:path.join(__dirname,"./src/main.js"),
    //输入文件的相关配置
    output:{
        //指定打包好的文件，输入到那个目录中去
        path:path.join(__dirname,"./dist"),
        //指定输入文件的名称
        filename:"bundle.js"
    },
    //devServer 和 package.json文件中的dev配置 起到一样的作用
    //配置webpack-dev-server参数的第二种形式
    
    devServer:{
        //配置端口
        port:3000,
        //自动打开浏览器
        open:true,
        //指定根路径
        contentBase:"src",
        //热跟新 的第一步
        hot:true
    },
    

    //插件

    
    plugins:[
        //配置插件的节点
        //创建一个更新的模块对象
        new webpack.HotModuleReplacementPlugin(),
        //创建 htmlWebpack对象
        new htmlWebpack({
            //创建一个 在内存中 生成html 页面的插件
            //指定模板界面，将来根据指定的模板界面，去生成内存中的页面
            template:path.join(__dirname,"./src/index.html"),
            //指定生成页面的名称
            filename:"index.html",
            inject:"head",
            title:"插件的使用"
        })
        

    ],
    //这个节点 用于配置所有的第三方模块 加载器
    module:{
        rules: [
            //第三方模块的匹配规则
            //test是正则表达式
            //配置处理.css文件的规则
            {test:/\.css$/,use:['style-loader','css-loader']}

        ]
    }

  
}

---

//处理过程
/**
 * 1.要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的大三房loader规则
 * 2.如果能找到对应的规则，就会调用对应的loader 处理 这种类型
 * 3.在调用loader的时候，是从右向左执行的
 * 4.当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去
 */

• 注意：如果样式less 需要安装npm i less less-loader -D这2个包，在匹配规则时，要加样式loader,因为less也是属于样式 {test:/\.less$/,use:['style-loader','css-loader','less-loader']}

• 默认情况下webPack无法处理css文件中的url地址，不管是图片还是字体库，只要是URL地址，都处理不了,需要安装一些loader库，url-loader库，但是这个库也是要依赖于file-loader库，所以都需要安装 npm i url-loader file-loader -D

//处理图片 路径 可以传入参数(固定的) limit，当给limit的值 大于图片的实际值的时候就会base64转码，当等于小于图片实际大小(字节)的时候，就显示URL
//参数name,使用[name].[ext]之后是不改变图片的原来的名称和后缀名
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:"url-loader?limit=19495&name=[name].[ext]"}

• 如果不同的文件夹下面有相同的名称的图片，那么后着将会覆盖前者，为了解决这样的问题，需要在前面加一个哈希值[hash:8]表示取前8为的哈希值

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:"url-loader?limit=19480&name=[hash:8]-[name].[ext]"}

Babel

• 安装Babel原因是：在webpack中，默认只能处理一些es6的语法，一些更高的或者es7的语法，它是处理不了的，这个时候，就需要借助于第三方的loader，来帮助webpack处理这些
• 通过Babel,可以帮助我们将高级的语法转化为低级的语法
• 需要安装2套包

第一个套：npm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套： npm i babel-preset-env babel-preset-stage-0 -D

• 配置文件在module节点下的rules数组中，添加一个新的匹配规则{text:/|.js/,use:"babel-loader",exclude:/node_modules/}

在配置babel的规则时，必须把node_modules文件目录，通过exclude选项排除掉，不然的话，webpack会把这个目录里面的js文件打包编译，这样会非常慢,消耗cpu

• 在项目的跟目中 新建一个 .babelrc的babel的匹配文件，属于json格式，必须要符合json的规范

{
   //语法
    "presets":["env","stage-0"],
  //插件
    "plugins":["transform-runtime"]
}

image.png

配置文件

var path = require("path")
//启用热跟新的第2步
const webpack = require("webpack")

//导入安装的插件
const htmlWebpack = require("html-webpack-plugin")
//作用： 1.自动生成内存中根据指定页面生成的一个内存页面
//2.自动，把打包好的bundle.js文件 写入

//webpack配置文件
module.exports = {
    //配置文件需要指出，入口 和出口
    //入口，表示要使用webpack打包那个文件
    entry:path.join(__dirname,"./src/main.js"),
    //输入文件的相关配置
    output:{
        //指定打包好的文件，输入到那个目录中去
        path:path.join(__dirname,"./dist"),
        //指定输入文件的名称
        filename:"bundle.js"
    },
    //devServer 和 package.json文件中的dev配置 起到一样的作用
    //配置webpack-dev-server参数的第二种形式
    
    devServer:{
        //配置端口
        port:3000,
        //自动打开浏览器
        open:true,
        //指定根路径
        contentBase:"src",
        //热跟新 的第一步
        hot:true
    },
    

    //插件

    
    plugins:[
        //配置插件的节点
        //创建一个更新的模块对象
        new webpack.HotModuleReplacementPlugin(),
        //创建 htmlWebpack对象
        new htmlWebpack({
            //创建一个 在内存中 生成html 页面的插件
            //指定模板界面，将来根据指定的模板界面，去生成内存中的页面
            template:path.join(__dirname,"./src/index.html"),
            //指定生成页面的名称
            filename:"index.html",
            inject:"head",
            title:"插件的使用"
        })
        

    ],

    //这个节点 用于配置所有的第三方模块 加载器
    module:{
        rules: [
            //第三方模块的匹配规则
            //配置处理.css文件的规则
            {test:/\.css$/,use:['style-loader','css-loader']},
            //less也是属于样式的 所以前面要匹配 样式loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //处理图片 路径  可以传入参数(固定的) limit，当给limit的值 大于图片的实际值的时候就会base64转码，当等于小于图片实际大小(字节)的时候，就显示URL
            //参数name,使用[name].[ext]之后是不改变图片的原来的名称和后缀名
            //如果不同的文件夹下面有相同的名称的图片，那么后着将会覆盖前者，为了解决这样的问题，需要在前面加一个哈希值[hash:8]表示取前8为的哈希值
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:"url-loader?limit=19480&name=[hash:8]-[name].[ext]"},
            //配置babel来转化高级的es6/7的语法
            {test:/\.js$/,use:"babel-loader",exclude:/node_modules/}

        ]
    }

}

• 在执行的时候 如果遇到下面的错误是因为babel-loader和babel-core不匹配
• 解决方式1
  • 在图片上已经说了使用babel-loader7的版本 npm i babel-loader@7.1.5 -D
    -解决方式2
  • 使用babel-core更高的版本 npm i babel-core@7.0 -D

image.png