Webpack4中的Entry入口、output输出

2019-05-06295次阅读webpack

webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个bundle(包或文件)。

Webpack4开始可以不用再引入一个配置文件来打包项目,开箱即用可以无需使用任何配置文件。然而,webpack会假定项目的入口起点为src/index,然后会在dist/main.js输出结果,并且在生产环境开启压缩和优化。通常,你的项目还需要继续扩展此能力,为此你可以在项目根目录下创建一个webpack.config.js文件,webpack会自动使用它。

 

Webpack入口(entry) 

Webpack入口起点(entry point)指示webpack应该使用哪个模块,来作为构建其内部依赖图(dependency graph)的开始。进入入口起点后,webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的。默认值是 ./src/index.js,如下:

webpack.config.js

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

如果在index.js文件中使用任何import导入,Webpack将处理它们。您可以有多个入口点,但是对于单页应用程序,通常只有一个入口点。

 

Webpack输出(output) 

output属性告诉webpack在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

webpack.config.js

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

 

运行webpack

cd到当前的项目根目录中,启动终端,npm安装:

npm init -y
npm install webpack

当前的项目根目录中将会多出一个node_modules文件夹(文件夹中包含了Webpack),以及两个文件:package.json和package-lock.json。现在打开package.json文件并修改脚本:

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

在项目根目录中新建一个src目录,在src目录下新建一个index.js文件。运行

npm run build

将使用node_modules目录中的webpack构建打包,这时您可以看到在dist目录中创建了一个main.js文件。

 

Webpack多个入口(entry)

如果您想拥有多个入口点,则可以使用对象。

webpack.config.js

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

使用该代码,我们创建了两个入口点。

 

Webpack输出(output) 

webpack.config.js

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

上面的代码,可以有多个文件作为输出。所有文件现在都有一个不同的名称,如:first.bundle.js和second.bundle.js。

上一篇: React.Fragment减少不必要嵌套的组件  下一篇: css3 放大缩小循环动画代码片段  

Webpack4中的Entry入口、output输出相关文章