webpack学习笔记（3）：Entry和Output基础用法

Entry

• 用来指定 webpack 的打包入口

webpack是一个模块打包器，对于代码资源或者非代码资源都会当成一个个的模块，对于模块之间的依赖，通过Entry，去寻找依赖之间的关系，从而形成一颗依赖树，然后生成打包的资源。

• Entry的用法

1. 单入口 （ entry是一个字符串）

module.exports = {
 entry: './path/entry/file.js'
}

入口只有一个或者单页应用

2. 多入口 ( entry是一个对象)

module.exports = {
 entry: {
 	app:'./path/entry/app.js',
 	subApp:'./path/entry/sub-app.js',
 }
}

Output

• 用来指定编译后的文件输出到磁盘的目录、名称

• 用法

1. 单入口配置

module.exports = {
 output: {
 	filename:'bundle.js',
 	path:__dirname + '/dist',
 }
}

2. 多入口配置

module.exports = {
 entry: {
 	app:'./path/entry/app.js',
 	subApp:'./path/entry/sub-app.js',
 },
 output: {
 	filename:'[name].js',
 	path:__dirname + '/dist',
 }
}

这里使用占位符确保文件名的唯一

例子

现在项目中有有两个文件入口： index.js和 search.js

1. 修改webpack.config.js添加入口文件

'use strict';

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production'
};

2. 修改webpack.config.js添加output占位符

'use strict';

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'production'
};

3. 执行构建

4. 查看dist目录