webpack打包工具

最新推荐文章于 2024-07-28 00:56:04 发布

波多

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量321

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_65151933/article/details/125567151

版权

webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

1.安装webpack

npm install -g webpack webpack-cli

2.检查安装是否成功

webpack -v

打包js文件

1.创建3个js文件

common.js
//方法名：info  可以被其它js调用  document.write：浏览器输出
exports.info = function(str){
    document.write(str)
}

utils.js
exports.add = function(a,b){
    return a+b;
}

main.js//引入common.js和utils.js
const common = require('./common.js')
const utils = require('./utils.js')

common.info('Hello common')
utils.add(5,3)

2.创建webpack.config.js(文件名固定)

const path = require('path');//Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output:{
        path:path.resolve(__dirname,'./dist'),//输出路径，_dirname:当前文件所在路径
        filename:'bundle.js' //输出文件
    }
}

3.执行打包

webpack
webpack --mode=development //开发环境
webpack --mode=production  //生产环境

4.测试

<!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>
    
    <h1>测试</h1>

    <script src="./dist/bundle.js"></script>
</body>
</html>

打包css文件

1.创建css文件

body{
    background-color: aqua;
}

2.引入css文件

const common = require('./common.js')
const utils = require('./utils.js')

require('./style.css')

common.info('Hello common')
utils.add(5,3)

3.安装

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

4.修改配置文件

const path = require('path');//Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output:{
        path:path.resolve(__dirname,'./dist'),//输出路径，_dirname:当前文件所在路径
        filename:'bundle.js' //输出文件
    },

    //添加打包css文件配置
    module:{
        rules:[
            {
                test:/\.css$/, //打包规则应用到以css结尾的文件上
                use:['style-loader','css-loader']
            }
        ]
    }
}