webpack 使用流程及配置文件（简洁全面的步骤）

最新推荐文章于 2023-03-02 12:35:52 发布

Mar-30

最新推荐文章于 2023-03-02 12:35:52 发布

阅读量537

点赞数 1

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_45856239/article/details/128069262

版权

webpack基本使用步骤以及配置：

1.完成目录图中的前三个步骤以及里面的内容：

（1）1.根目录

（2）2.文件html

（3）3.src文件夹

完成 index.html index.css tools.js 的编写

引入到 index.js 里面

如下图所示：

2.初始化，安装，配置

（1）.初始化npm: npm init -y

（2）.安装webpack命令： npm i webpack webpack-cli -D

（3）配置文件：

module.exports = {
//自定义配置写在这里（对象键值对）

}

// 导入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 配置
module.exports = {

    // 1.打包模式
    mode: 'production',

    // 2.入口文件
    entry: `${__dirname}/src/index.js`,

    // 3.出口文件
    output: {
        path: `${__dirname}/dist`,
        filename: `main.js`
    },

    // 4.html配置
    plugins: [
        new HtmlWebpackPlugin({
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                minifyCSS: true
            },
            template: `./public/index.html`
        })
    ],

    // 5.配置静态插件
    module: {
        rules: [

            // css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },

            // less
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },

            // 图片
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: 'asset'
            }
        ]
    },

    // 服务器配置
    devServer: {
        host: '127.0.0.1',
        port: 3000,
        open: true
    }

}

package.json 文件中修改的部分如下：

3.控制台命令（从头到尾）：

初始化npm: npm init -y

安装webpack: npm i webpack webpack-cli -D

下载html插件 : npm i html-webpack-plugin -D

下载css插件 : npm i css-loader -D

npm i style-loader -D

下载less插件 : npm i less-loader less -D

下载服务器插件 : npm i webpack-dev-server -D

启动服务器: npm run dev