Webpack4教程：第一部分，入口、输入和ES6模块

前端开发作者： 2024-08-22 01:45:01

今天我们会开始一个 Webpack 4的入门教程。我们会以Webpack的基本概念开始，随着教程逐渐深入。这一次，我们将学习用ES6 modules进行模块化的基础知识。Webpack 4提供了默认配

打包的目的

export

Named导出

// lib.js
export function sum(a,b) {
  return a + b;
}

export function substract(a,b) {
  return a - b;
}

function divide(a,b) {
  return a / b;
}

export { divide };

Default导出

// dog.js
export default class Dog {
  bark() {
    console.log('bark!');
  }
}

import

整个导入

// index.js
import * as lib from './lib.js';

console.log(lib.sum(1,2));
console.log(lib.substract(3,1));
console.log(lib.divide(6,3));

// index.js
import * as Dog from './dog.js';

const dog = new Dog.default();
dog.bark();

导入一个或多个named导出

// index.js
import { sum,substract,divide } from './lib';

console.log(sum(1,2));
console.log(substract(3,1));
console.log(divide(6,3));

导入一个default导出

// index.js
import Dog from './dog.js';

const dog = new Dog();
dog.bark(); // 'bark!'

import Cat from './dog.js';

const dog = new Cat();
dog.bark(); // 'bark!'

webpack.config.js

Entry

module.exports = {
  entry: './src/index.js'
};

Output

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

module.exports = {
  entry: './src/index.js',output: {
    path: path.resolve(__dirname,'dist'),filename: 'main.js'
  }
};

npm init -y
nppm install webpack webpack-cli

"scripts": {
  "build": "webpack"
}

entries

// webpack.config.js
module.exports = {
  entry: {
    first: './src/one.js',second: './src/two.js'
  }
}

outputs

// webpack.config.js
module.exports = {
  entry: {
    first: './src/one.js',second: './src/two.js',},output: {
    filename: '[name].bundle.js',path: path.resolve(__dirname,'dist')
  }
}