web前端day6——webpack&loader

最新推荐文章于 2024-10-17 13:54:48 发布

意瑚琏

最新推荐文章于 2024-10-17 13:54:48 发布

阅读量105

点赞数

分类专栏：前端文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_40422539/article/details/108435375

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

webpack

为什么要引入webpack

网页加载慢，二次请求多
要处理错综复杂的依赖关系

解决

合并压缩，精灵图，图片base64编码
requireJS、webpack(基于node.JS，基于真个项目构建的)、gulp(基于task任务，基于部分构建）

使用webpack

1.初始化

npm init -y

在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。话不多说我们就直接开始进行操作。

npm安装时 -s和-d的含义

-s:即–save（保存）包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-d:即–dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

2.安装webpack

npm i webpack -D//-D表示本地项目安装

webpack可以将ES6语法的js转化为es5进而可以被浏览器执行。把原本在html里面引用的资源放到main.js去引用，webpack能够处理js文件间的依赖关系

3. 将不符合ES5的文件转化为ES5

使用cli命令

webpack 要转化文件路径 转化文件出口

配置webpack.config,json

const path = require('path')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development'
}

webpack命令的运行过程

webpack发现没有指定入口和出口，就去根目录找配置文件webpack.config.
找到文件后解析执行，得到配置文件中导出的配置对象
//拿到了配置文件中的入口出口，然后打包构建

4.自动编译webpack-dev-server

npm i webpack-dev-server -D//

本地项目安装无法直接命令行运行。可以在package.json中配置宏命令

注意：就算全局安装了webpack,本地也要安装才能使用webpack-dev-server,因为webpack-dev-server依赖于webpack

cnpm i webpack -D//

到这里就实现了自动编译了

打包生成的bundle.js文件并没有存在于物理磁盘而是托管在内存中。所以在物理磁盘中找不到

常见的webpack-dev-server命令

–open,打开浏览器
–port 3000,指定端口
–contentBase src，指定托管根目录
–hot,热更新，无刷新重载，只刷新部分

配置方式1 在package.json里面配置

{
  "name": "webpackstudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1",
    "webpack": "^4.44.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

配置方式2 把命令移到webpack.config.js中去
webpack.config.json

const path = require('path')
constwebpack=require('webpack')//热更新第二步

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development',
    devServer:{
        open:true,
        port:3000,
        contentBase:'src',
        hot:true//启用热跟新的第一步

    },
    plugins:[//第三步，配置插件节点
        new webpack.HotModuleReplacementPlugin()//热更新模块对象
    ]
}

此时,package.js中

  "dev": "webpack-dev-server“

插件html-webpack-plugin

生成内存中的页面

使用
1.装包

npm i html-webpack-plugin -D

2.配置webpack.confid.json

const path = require('path')
const webpack=require('webpack')//热更新第二步

//导入在内存中生成html页面的插件
//只要是插件都要放到plugins节点中去
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development',
    devServer:{
        open:true,
        port:3000,
        contentBase:'src',
        hot:true//启用热跟新的第一步

    },
    plugins:[//第三步，配置插件节点
        new webpack.HotModuleReplacementPlugin(),//热更新模块对象
        new htmlWebpackPlugin=({//创建一个在内存中生成页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面
            filename:'index.html'//指定生成的页面的名称
        })
    ]
}

使用了这个，我们不在需要手动处理bundle.js的引用路径，因为插件为我们自动创建了合适的script,并且引用了正确的路径。
因为webpack生成文件的路径是可以被插件所知道得。

插件的两个作用