【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件

WebPack的使用

总结：使用WebPack之后，开发模式是，在src目录下进行模块化开发，开发之后使用WebPack打包成浏览器可以解析的bundle.js文件，直接在html中引用该js文件。
WebPack可以帮我们处理模块之间的依赖，并打包。

当前WebPack版本：4.41.5

使用 WebStorm 建立空项目，编写main.js和mathUtils.js

main.js

// WebPack支持各种模块化规范，例如：
// 使用CommonJS的模块化规范
const {add,mul}=require('./mathUtils.js')

console.log(add(20,30));
console.log(add(20,40));

// 使用ES6的模块化规范
import {name,age,height} from "./info";

console.log(name);
console.log(age);
console.log(height);

mathUtils.js

function add(num1, num2) {
    return num1 + num2;
}

function mul(num1, num2) {
    return num1 * num2;
}

module.exports={
    add,
    mul
}

使用 WebPack 打包：命令 webpack ./src/main.js -o ./dist/bundle.js
WebPack 可以帮助我们处理各种模块之间的依赖，只要告诉 WebPack 入口是 main.js，它会自动分析依赖；
在这里插入图片描述
打包成功后，生成 bundle.js，整体目录结构：

使用生成的bundle.js文件：

点击运行

运行结果
在这里插入图片描述

笔记整理

在这里插入图片描述

使用npm init初始化一个package.json

使用配置文件

在这里插入图片描述

package.json

{
  "name": "01-webpack_use",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

打包命令webpack
或者npm run build
WebPack分为全局的WebPack和本地项目目录本地的WebPack，
在WebStorm自带的终端，npm install [email protected]，安装本地WebPack，指定版本。

在使用时，只要是在终端输入webpack，使用的都是全局的webpack，而在json配置文件定义的webpack脚本会优先在本地中找。

开发时依赖/运行时依赖

如何把css文件也模块化？

在这里插入图片描述

在这里插入图片描述
根据：webpack 官网示例
安装下列loader：
npm install --save-dev css-loader
npm install style-loader --save-dev

打包命令：npm run build

less-loader 官方示例

使用less文件预处理css
npm install --save-dev less-loader less
在这里插入图片描述

添加图片

在这里插入图片描述
url-loader 使用示例 - vue 官方文档

配置：webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,  // 正则匹配css文件
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                // 使用多个loader时，是从右向左读，下面两个顺序不能换。
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10*1024
                        }
                    }
                ]
            }
        ]
    }
}