webpack打包学习笔记

RAY_CHEN.

已于 2022-10-28 21:39:38 修改

阅读量397

点赞数

文章标签： webpack 学习前端

于 2022-10-28 12:50:58 首次发布

本文链接：https://blog.csdn.net/weixin_44707050/article/details/127569422

版权

常见打包工具：webpack , vite

webpack是静态资源打包工具用于转换编译es6+的语法还可以压缩代码提升性能等

webpack本身功能比较少只能处理js 遇到css等需要插件处理

构建过程：由一个或多个入口文件开始编译转换转换完的文件组合成一个或多个文件输出在浏览器上就可以运行了

demo:

初始化生成package.json ，name不能是webpack会报错

npm init -y

下载webpack

npm i webpack webpack-cli -D

文件中创建src/main.js作为入口文件

可以创建src/js/a.js


const func=()=> {
    console.log('我是打包js')
}
export default func

写一个方法导出，在入口文件main.js中引入

import func from './js/a'
func()
console.log('我是main.js')

创建public/index.html ，src引入dist/main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../dist/main.js"></script>
    <p>hellowebpack</p>
</body>
</html>

webpack打包

npx webpack ./src/main.js --mode=development

会生成dist文件，dist/main.js

运行index.html，可运行并且可运行方法

--mode=development ， --mode=production

开发模式仅会转换编译代码，生产模式不仅转换编译代码，还能压缩代码等功能

创建webpack.config.js文件做配置

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'main.js'
    },
    module:{
        rules:[]
    },
    plugins:[],
    mode:'development'

}

output要两个参数，一个path绝对路径，所以用path模块

一个是filename 打包的文件名

如果没有配置文件 npx webpack ./src/main.js --mode=development

如果有配置文件 npx webpack即可

开发模式做的事情：1.编译代码 2.检查语法

处理css资源 css-loader style-loader

可在webpack官网上找到loader模块找到相应资源进行下载

在webpack.config.js中 module.rules中添加对象，两个值，1.test 2.use

只要是遇到test中后缀名的就用use中的loader处理

图片资源，webpack4中用的是url-loader , file-loader

webpack5中内置了这两个loader 做简单配置即可