webpack配置与使用

2020-08-29 本文已影响0人攻城老狮

1 概述

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2 webpack安装

# 全局安装webpack
npm install -g webpack webpack-cli
# 查看版本确认是否安装成功
webpack -v

3 js文件打包与css文件打包

3.1 项目初始化

npm init -y

创建src源文件夹，用于存放需要整合的js和css文件

创建common.js文件

exports.info = function(data){
    document.write(data);
}

创建utils.js文件

exports.sum = function(num1,num2){
    return parseInt(num1) + parseInt(num2);
}

创建style.css文件

body {
    background-color: aqua;
}

创建main.js文件，用于整合之前的文件

//引入js模块
const common = require("./common.js");
const utils = require("./utils.js");
//引入css模块
require("./style.css");

//调用方法
common.info("Hello webpack " + utils.sum(2,3));

3.2 安装style-loader和 css-loader 用于css打包

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

3.3 js与css文件打包的配置文件

在webpack的目录下创建配置文件 webpack.config.js，配置如下内容：

const path = require("path");
module.exports = {
    entry: "./src/main.js", //配置入口文件
    output: {
        path: path.resolve(__dirname,"./dist"), //输出路径,__dirname为当前文件所在路径
        filename: "bundle.js" //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                use: ["style-loader","css-loader"]
            }
        ]
    }
}

3.4 执行命令编译文件

# 代码会被压缩的生产模式
# webpack

# 代码不会压缩的开发模式
webpack --mode=development

3.5 测试

在webpack的目录下创建 index.html，引用生成的bundle.js文件

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

至此，可以成功看到输出内容以及样式效果。证明打包成功。

3.6 目录结构

image-20200827165653544.png