webpack entry和output配置属性

1、entry

entry的三种配置方式：

（1）传递字符串：

单个入口语法：传递一个字符串

entry: './src/js/main.js',

（2）传递数组

将创建“多个主入口(multi-main entry)，并且将它们的依赖导向(graph)到一个“chunk”时。

entry: ['./src/js/main.js','./src/js/a.js'],

示例，webpack.config.js文件为：

module.exports = {//打包入口entry: ['./src/js/main.js','./src/js/a.js'],//打包后的文件
    output: {//不加__dirname 会报错//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下报错
path: __dirname,filename: './dist/js/bundle.js'}
}

执行命令：

npm run webpack

效果为文件合并到一个文件中了，如下：

（3）传递对象

webpack.config.js文件为：

module.exports = {//打包入口
    entry: {main: './src/js/main.js',a: './src/js/a.js'},//打包后的文件
    output: {//不加__dirname 会报错//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下报错
path: __dirname,//注意：使用[name]确保每个文件名都不重复filename: './dist/js/[name].js'}
}

注意：

你应该使用以下的替换方式来确保每个文件名都不重复。

[name] 被 chunk 的 name 替换。

[hash] 被 compilation 生命周期的 hash 替换。

[chunkhash] 被 chunk 的 hash 替换。

2、output

output.filename

指定硬盘每个输出文件的名称。在这里你不能指定为绝对路径！

文件hash码：

module.exports = {//打包入口
    entry: {main: './src/js/main.js',a: './src/js/a.js'},//打包后的文件
    output: {//不加__dirname 会报错//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下报错
path: __dirname,//注意：使用[name]确保每个文件名都不重复filename: './dist/js/[name]-[hash].js'}
}

执行命令：

npm run webpack

结果：

[hash] 每个文件的hash都一样，文件的hash为打包的hash。

module.exports = {//打包入口
    entry: {main: './src/js/main.js',a: './src/js/a.js'},//打包后的文件
    output: {//不加__dirname 会报错//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下报错
path: __dirname,//注意：使用[name]确保每个文件名都不重复filename: './dist/js/[name]-[chunkhash].js'}
}

使用[chunkhash] 文件的hash都不一样，也与打包hash不一样，这里的hash是文件的MD5值。

webpack entry和output配置属性相关推荐

webpack2 实践系列（二）— entry 和 output
源码地址:https://github.com/silence717/webpack2-demos 具体可参见 demo02-entry-output 目录下 Entry Points entry是w ...
前端进阶（二）webpack开发服务器环境配置
webpack开发服务器 webpack 使用 babel 处理高版本的 js 语法 babel 的介绍 => 用于处理高版本 js语法的兼容性安装包 yarn add -D babel-l ...
webpack --- 发布环境的配置代码压缩代码分类
说明源代码本篇主要对发布环境的配置说明前面2点是对webpack的一个复习. 第3点开始,逐步配置部署代码 1. Webpack发布的策略 2.1 在实际开发中,一般会有两套方案: 开发期间的项 ...
细说webpack 3. webpack-cli 零配置打包
大家好!我是萝卜,webpack 4 带来了大量的更新,其中一个就是webpack 4 默认不需要配置文件,下面就带大家体验一下! 初始化项目首先创建项目,创建一个名为webpack的文件夹,进入文 ...
webpack预览页面配置
应用场景:当我们配置了webpack自动打包工具后,通过 http://localhost:8080/ 访问到的是文件夹根目录,而没有直接打开html页面,如果要打开html页面需要在界面中点击指定的 ...
webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
webpack入门+react环境配置 1
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
桃子叔叔为您解析webpack-dev-server主要的配置属性
webpack-dev-server 配置属性众所周知webpack-dev-server有三种配置方式,有配置文件方式.package.json方式和纯node的API实现方式,桃子叔叔推荐使用的 ...
一份比较详细的 webpack 4.x 手工配置基础开发环境附源码
重新书写了博客内容,希望可以更好的呈现该有的知识点. bundle.js 指的是 webpack 打包后的文件. 小剧场项目经理:我们要开始一个新的项目,裤裆你来负责项目构建吧. 我:好的没问题,经 ...

webpack entry和output配置属性

单个入口语法：传递一个字符串

webpack entry和output配置属性相关推荐

最新文章

热门文章