最简单——配置最简单的webpack打包项目

最简单——配置最简单的webpack打包项目

初始化项目

1. 找一个空目录初始化项目

yarn init -y

2. 安装依赖

yarn add webpack webpack-cli --save--dev

3. 创建webpack 配置文件

// filename: ./webpack.config.js 
const path = require('path');

module.exports = {
    entry: {
        index: './index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: 'build.js'
    },
    resolve: {
        extensions: ['.js']
    }
}

4. 测试文件

入口文件

// filename: ./index.js
import AA from './src/index';
// const AA = require('./src/index')

const instanceA = new AA('123231');

console.log('result', instanceA);

被引用文件

// filename: ./src/index.js
class Test {
    constructor(hhh) {
        this.hhh = hhh;
    }
    nicai() {
        return this.hhh;
    }
}

export default Test;

5. 开始测试

情况一： 不打包，直接运行入口文件

情况二：打包后运行

1. 打包

npx webpack

打包结果

2. 执行

node ./dist/build.js

执行结果

打包完之后可以看到代码可以直接执行了

ps：文件夹目录截图