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' // 在出口目录中生成的文件

    }

}

本人初学者,若有问题请及时留言,谢谢!

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页