webpack5.2的安装与使用

1、首先，创建目录： mkdir webpack-demo

2、访问该路径：cd webpack-demo

3、初始化操作：npm init -y

4、安装webpack及webpack-cli：npm install webpack webpack-cli --save-dev

5、创建src目录和dist目录：mkdir src（并在该目录下创建script目录，创建main.js）；mkdir dist（并在该目录下创建js目录）

6、创建webpack.config.js文件并输入内容：

var path = require("path")

module.exports = {

    entry: './src/script/main.js', // 入口

    output: {

        path: path.resolve(__dirname, './dist/js'), // 出口目录

        filename: 'bundle.js' // 在出口目录中生成的文件

    }

}

 

7、配置package.json文件，在scripts中配置："webpack": "webpack --config webpack.config.js --progress --color"，如下图：

 

8、控制台运行命令：npm run webpack

9,、多个入口和多个出口的情况：

在上个工程基础上的script目录下增加 one.js和two.js，修改webpack.config.js文件：

// 多个入口和多个出口的情况

module.exports = {

    entry: // 入口

        {

            main: './src/script/main.js',

            app: ['./src/script/one.js','./src/script/two.js']

        }, 

    output: {

        path: path.resolve(__dirname, './dist/js'), // 出口目录

        filename: '[name].js' // 在出口目录中生成的文件

    }

}

本人初学者，若有问题请及时留言，谢谢！