webpack

一、安装依赖

yarn add webpack webpack-cli

二、配置package.json的文件

"scripts": {
    "start": "webpack --config webpack.config.js"
}

三、第一次打包

# 配置webpack.config.js
const path = require("path");
module.exports = {
    entry:"./index.js",
    output:{
        filename:"bundle.js",
        path:path.join(__dirname,"dist")
    },
    mode:"development"
}

四、loader

可以让入口文件index.js处理非js文件

1-1 入口文件中处理css

yarn add css-loader style-loader

# webpack.config.js
const path = require("path");
module.exports = {
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist")
    },
    module: {
        rules: [
            { test: /\.css$/, use:["style-loader", "css-loader"] }
        ]
    },
    mode: "development"
}

1-2 处理图片

yarn add url-loader

#webpack.config.js
const path = require("path");
module.exports = {
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist")
    },
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader", "css-loader"] }, 
            {
                test: /\.(png|jpg|gif)$/i,
                use: ["url-loader"]
            }
        ]
    },
    mode: "development"
}