webpack的基本使用

本文主要介绍webpack的基本使用，通过简单的打包流程进行具体说明。

1.新建pack文件夹，运行npm init -y初始化package.json文件，不用-y则需要手动进行配置。

package.json文件内容如下：

{
    "name": "pack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "jquery": "^3.6.0"
    },
    "devDependencies": {
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.10.0"
    }
}

2.新建src文件夹，新建index.html和index.js文件

3.安装jquery,书写index.js文件如下

import $ from 'jquery'
$(function() {
    $('.btn').click(function() {
        $('#showContent').slideDown();
        $('#showContent').css('backgroundColor', 'yellow')
    })
})

4.安装webpack和webpack-cli包，创建webpack.config.js文件，配置内容如下：

module.exports = {
    mode: 'development',
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8800,
        static: './'
    }
}

 5.安装webpack-dev-server包,修改命令如下：

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
    },

 6.index.html文件引入"/bundle.js"文件，运行npm run dev命令即可

7.上述文件运行后并不会直接打开首页，故需要进行配置。首先运行npm i html-webpack-plugin -D

 命令，安装html-webpack-plugin包，配置预览页面。在webpack.config.js中的具体配置如下:

const HtmlWebpack = require('html-webpack-plugin')
const h = new HtmlWebpack({
    template: './src/index.html',
    filename: 'index.html'
})
module.exports = {
    mode: 'development',
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8800,
        static: './'
    },
    plugins: [h]
}

8.在package.json文件中定义如下内容

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server",
        "build": "webpack"
    }

运行npm run build命令即可对文件进行打包，会生成dist这一最终的文件夹。

9.可进行项目入口与出口文件的配置。默认入口文件是src目录下的index.js文件，出口文件是main.js,现配置为bundle.js.需要使用npm内置的path包，完整代码如下：

const HtmlWebpack = require('html-webpack-plugin')
const path = require('path')
const h = new HtmlWebpack({
    template: './src/index.html',
    filename: 'index.html'
})
module.exports = {
    mode: 'development',
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8800,
        static: './'
    },
    plugins: [h],
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
}