webpack打包经验分享

独立开发者格瑞

已于 2022-02-17 10:46:51 修改

阅读量263

点赞数

文章标签： webpack 前端 javascript

于 2022-02-17 10:46:29 首次发布

本文链接：https://blog.csdn.net/qq_44849312/article/details/122977935

版权

webpack

简介

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。在前端工程化中特别常用。

初始化项目

1、创建文件夹testProject，使用vscode打开该文件夹，打开终端，执行命令

npm init   //得到package.json的一个文件

2.安装webpack

npm install  webpack webpack-cli

3.构建测试项目代码
创建src文件夹，存放需要合并的js文件
util.js文件

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

common.js文件

exports.info = function (str) {
   //往浏览器输出
   document.write(str);
}

src下创建main.js的入口文件

//将所有的js文件进行引入到一个文件中
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

4、在根目录下定义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' //输出文件
    }
}
//执行webpack时会找到这个文件，然后根据entry找到main.js从而将需要的文件进行打包
//合并完成后，写入到dist目录下的bundle.js文件

5.创建测试的test.html引用生成的bundle.js

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title></title>
    <style>
         *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            -webkit-tap-highlight-color:transparent;
        }
    </style>
</head>
<body>
    <script src="../dist/bundle.js"></script>
    <script>

    </script>
</body>
</html>

6.配置package.json，加入命令

"scripts": {   
        //...,    
        "dev": "webpack -w --mode=development" 
        }

7.运行命令，进行打包

  npm run dev

8.打开test.html查看效果

补充

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。
1、安装style-loader和 css-loader

//css-loader 是将 css 装载到 javascript
//style-loader 是让 javascript 认识css
//安装完后，就会在package.json中产生依赖
npm install --save-dev style-loader css-loader

2、修改webpack.config.js，配置CSS打包的规则

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

这时候就可以把css也进行打包啦