webpack基础使用

webpack是静态资源打包工具，它会以一个或多个作为打包入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去，输出的文件就是编译好的文件，就可以在浏览器运行，

功能介绍：webpack本身功能是有限的，只能处理js资源，一旦遇到css等其他资源就会报错，

开发模式仅编译js中的es module语法（npx webpack ./src/main.js --mode=development）。

生产环境：能编译js,还能压缩js代码（npx webpack ./src/main.js --mode=production）

目录结构

COUNT.JS

export default function count(x,y){
    return x-y
}

main.js

import count from './js/count.js'
console.log(count(2,1))

下载依赖初始化

npm init -y

产生基础的package.json文件

npm i webpack webpack-cli -D

{
  "name": "test-w",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

启用webpack

开发模式：npx webpack ./src/main.js --mode=development

生产模式：npx webpack ./src/main.js --mode=production

npx webpack用来运行本地安装webpack包

./src/main.js是指从webpack从main.js文件开始打包，

--mode=xxx指定模式

默认webpack会将文件打包输出到dist目录下

webpack基础配置

entry入口，指示webpack从那个文件开始打包

output输出，指示webpack打包完的文件输出到哪里去，如何命名等

loader加载器，webpack本身只能处理js、json等资源，其他资源需要借助loader,webpack才能解析

plugins插件，扩展webpack的功能，

mode模式，开发模式development，生产模式production

处理样式资源（如：css,less,sass,scss,style）:webpack本身不能识别样式资源，需要借助loader来帮助webpack解析样式资源

处理css---下载包 npm i --save-dev css-loader ，npm i style-loader

处理less---下载包 npm i less less-loader --save-dev

处理sass---下载包 npm i sass-loader sass webpack --save-dev

css-loader:负责将css文件编译成webpack能识别的模块

style-loder：会动态创建一个style标签，里面放webpack中css模块内容

处理styl资源---下载包npm i stylus-loader -D

stylus-loader：负责将styl文件编译成css文件

// nodejs核心模块,专门用来处理路径文件
const path = require("path")

module.exports = {
    // 入口 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 文件输出路径 
        // _dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"), //绝对路径
        // 文件名
        filename: 'main.js'
    },
    //加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/i, //检测xx文件
                //执行顺序，从右到左，从下到上。
                // 将js中css通过创建style标签添加html文件中生效，
                // 将css资源编译成commonjs模块到js中
                use: ["style-loader", "css-loader"],
            },
            // loader的配置
            {
                test: /\.less$/i, //检测xx文件
                //执行顺序，从右到左，从下到上。
                // 将js中css通过创建style标签添加html文件中生效，
                // 将css资源编译成commonjs模块到js中
                //将less编译成css文件
                use: ["style-loader", "css-loader","less-loader"],
            },
            {
                test: /\.s[ac]ss$/i, //检测xx文件
                //执行顺序，从右到左，从下到上。
                // 将js中css通过创建style标签添加html文件中生效，
                // 将css资源编译成commonjs模块到js中
                //将sass编译成css文件
                use: ["style-loader", "css-loader","sass-loader"],
            },
            {
                test: /\.styl$/i, //检测xx文件
                //执行顺序，从右到左，从下到上。
                // 将js中css通过创建style标签添加html文件中生效，
                // 将css资源编译成commonjs模块到js中
                //将sass编译成css文件
                use: ["style-loader", "css-loader","stylus-loader"],
            },
            
        ]
    },
    // 插件
    plugins: [
        // Plugin的配置
    ],
    // 模式
    mode: "development"
}