webpack的使用及配置

一.webpack初始化

1.执行yarn/npm init -y 命令

2.安装依赖包

yarn add [email protected] [email protected] -D

3.在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

执行完命令即可使用yarn build 命令打包

二.配置修改

1.修改默认入口和出口

默认入口: src/index.js

默认出口: dist/main.js
1.项目根目录 - 新建webpack.config.js文件 (默认配置文件名)
2.填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}

3. 修改代码里src/index.js 为 src/main.js
4. 重新打包观察输出文件名字

2.webpack-插件-自动生成html文件

1.下载插件

yarn add html-webpack-plugin  -D

2.webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

3.重新打包后观察dist下

• 自动生成html文件
• 自动引入打包后js文件

3.webpack-加载器-处理css文件问题

1.下载插件

yarn add [email protected] style-loader  -D

2.webpack.config.js配置

module.exports = {
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

4.webpack-加载器-处理less文件

1.下载插件

yarn add [email protected] less-loader -D

2.webpack.config.js配置

module: {
  rules: [ 
    // ...省略其他
    {
    	test: /\.less$/, // 匹配.less结尾文件
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

5.webpack-加载器-处理图片文件

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}

6.webpack-加载器-处理字体文件

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',  // 当做静态资源直接复制文件
    generator: {
    	filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
    }
}

7.webpack-加载器-处理高版本js语法

1.安装依赖包

yarn add -D babel-loader @babel/core @babel/preset-env

2.webpack.config.js 配置规则

module: {
    rules: [
        {
            test: /\.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }
    ]
}

二.开发服务器

1.下载包

yarn add webpack-dev-server -D

2.配置自定义命令serve

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

3.webpack.config.js 配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}

4.运行命令-启动webpack开发服务器

yarn serve
#或者 npm run serve