webpack基础

webpack的安装

注意：提前安装node最新版的环境

// 项目中安装，cli命令
npm i  webpack webpack-cli -D

webpack的使用

webpack4以后可以实现0配置

// npx 找webpack的默认配置文件
npx webpack

index.js

// commonJs规范，浏览器中无法使用其导入模块
// let a = require('./a.js')
// es6导入导出规范
import a from './a.js'
console.log(a)
console.log("hello world!")

a.js

console.log("a模块")
// commonJS规范
// module.exports = {
//     name: "aaa"
// }

// ES6规范
export default {
    name: 'aaa'
}

输出：

webpack配置

webpackjs.com/concepts

1. entry
2. output
3. loader
4. plugins

webpack.config.js

// 遵循commonJS规范

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        // path.resolve(): 解析当前相对路径的绝对路径
        // path.join(): 路径拼接
        // path: path.resolve('./dist/'),
        path: path.join(__dirname,'./dist/'),
        filename:'bundle.js'
    },
    mode: 'development'
}

//多个配置文件
npx webpack --config xxx.js

package.json

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

自动编译 watch webpack-dev-server

npm i webpack-dev-server webpack -D

webpack.config.js

// 遵循commonJS规范

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        // path.resolve(): 解析当前相对路径的绝对路径
        // path.join(): 路径拼接
        // path: path.resolve('./dist/'),
        path: path.join(__dirname,'./dist/'),
        filename:'bundle.js'
    },
    mode: 'development',
    devServer: {
        open: true,
        hot: true,
        compress: true,
        port: 3000,
        static: './src'
    }
}

package.json

{
    "scripts": {
        "build": "webpack --config webpack.config.js",
        "watch": "webpack --watch",
        "dev": "webpack-dev-server"
    },
    "devDependencies": {
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1"
    }
}

html插件

// 遵循commonJS规范

const path = require('path')
const HtmlWebpackPlugin =  require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        // path.resolve(): 解析当前相对路径的绝对路径
        // path.join(): 路径拼接
        // path: path.resolve('./dist/'),
        path: path.join(__dirname,'./dist/'),
        filename:'bundle.js'
    },
    mode: 'development',
    devServer: {
        open: true,
        hot: true,
        compress: true,
        port: 3000,
        static: './src'
    },
    plugins:[
        // devserver时，index.html 放服务器根目录下
        // devserver时，index.html 自动引入bundle.js
        // 打包时放到dist目录下
        new HtmlWebpackPlugin({
            filename:'index.html',
            template: './src/index.html'
        })
    ]
}

webpack-dev-middleware 搭建服务器

npm i express webpack-dev-middleware

loader：css

npm i css-loader style-loader -D

main.js

import './css/index.css'

webpack.config.js

module: {
    rules: [
        {
            // \转义 $以结尾
            test: /\.css$/,
            // css-loader 解析css文件 style-loader 放到html中
            use:['style-loader','css-loader']
        }
    ]
}

loadre: less sass

npm i less-loader -D

main.js

import './less/index.less'

webpack.config.js

module: {
   rules: [
        {
            // \转义 $以结尾
            test: /\.css$/,
            // css-loader 解析css文件 style-loader 放到html中
            use:['style-loader','css-loader']
        },
        {
            test: /\.less$/,use:['style-loader','css-loader','less-loader']
        }
    ]
}

loader: 图片 字体

npm i file-loader -D
npm i url-loader -D

webpack.config.js

module: {
    rules: [
        {
            // \转义 $以结尾
            test: /\.css$/,
            // css-loader 解析css文件 style-loader 放到html中
            use:['style-loader','css-loader']
        },
        {
            test: /\.less$/,use:['style-loader','css-loader','less-loader']
        },
        // {
        //     test: /\.(jpg|jpeg|png|gif|woff|Woff2|eot|svg|ttf)$/,use:['file-loader']
        // },
        {
            test: /\.(jpg|jpeg|png|gif|woff|Woff2|eot|svg|ttf)$/,use:{
                loader: 'url-loader',
                option: {
                    limit: 5 * 1024
                }
            }
        }
    ]
}

babel

babeljs.cn babeljs.io

// 预设
npm i babel-loader @babel/core @babel/preset-env webpack -D
// 高级语法
npm i @babel/plugin-proposal-class-properties -D
// 语法补丁
npm i @babel/polyfill -S

babelrc

{
    // 预设
    "presets":["@babel/env"],
    // 高级
    "plugins":[
        "@babel/plugin-proposal-class-properties"
    ]
}

source map

webpackjs.com/configuration/devtool
webpack.config.js

// 开发环境
devtool:'eval-cheap-module-source-map'
// 生产环境
devtool:'none'

插件

npmjs.com
clean-webpack-plugin build时自动清除dist目录

npm i clean-webpack-plugin -D

webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

plugins:[
        new CleanWebpackPlugin()
    ]

copy-webpack-plugin 搬运静态文件

npm i copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins:[
    new CopyWebpackPlugin(
    {patterns: [
        {
            // __dirname 根目录
            from: path.join(__dirname,'assets'),
            to:'assets'
        }
    ]})
]

BannerPlugin 内置插件

const webpack = require('webpack')

plugins:[
   new webpack.BannerPlugin('版权信息')
]