更多内容已经迁移至掘金,欢迎来指导学习:

 https://juejin.im/post/5d64a0bf518825470b3443f2

output: {
filename: './js/[name].[hash:8].js',
/*
* filename:在使用webpack-dev-server模式时,如果要使用hash,是不可以使用chunkhash的,建议直接使用hash,必须是相对路径
* path:输出路径必须是绝对路径, dist输出文件目录
* publicPath:如果要设置热更新,必须要添加publicPath
* */
path: path.resolve(__dirname, 'dist'),
},
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,
主输出文件默认为 ./dist/main.js,其他生成文件的默认输出目录是 ./dist。
你可以通过在配置中指定一个 output 字段,来配置这些处理过程 path: 所有输出文件的目标路径;path是webpack所有文件的输出的路径,必须是绝对路径,
比如:output输出的js,url-loader解析的图片,HtmlWebpackPlugin生成的html文件,都会存放在以path为基础的目录下
publicPath: 输出解析文件的目录,url 相对于 HTML 页面;publicPath 并不会对生成文件的路径造成影响,主要是对你的页面里面引入的资源的路径做对应的补全,常见的就是css文件里面引入的图片

webpack.config.js====output出口文件的配置的更多相关文章

  1. webpack.config.js====entry入口文件的配置

    1.  一般是采用对象语法: entry: { index: './src/default/js/index.js' }, https://webpack.css88.com/concepts/ent ...

  2. 配置webpack.config.js中的文件

    webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将 ...

  3. webpack安装大于4.x版本(没有配置webpack.config.js)

    webpack安装大于4.x版本(没有配置webpack.config.js) webpack 输出参数-o 高版本  如果安装的webpack版本大于4+,还需要安装webpack-cli.在没有配 ...

  4. react webpack.config.js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  5. webpack.config.js配置文件

    1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式 ...

  6. webpack.config.js配置入口出口文件

    目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...

  7. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  8. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  9. webpack.config.js文件的高级配置

    一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.Co ...

随机推荐

  1. js 图片上传

    可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...

  2. poj2392磊石头——排序后背包

    题目: 首先按限制高度从小到大排序,不会影响可行解,而不排序可能卡掉正确的情况: 用%2滚动数组时一定注意每次复制上一种情况,因为这个WA了好几次. 代码如下: #include<iostrea ...

  3. poj3254二进制放牛——状态压缩DP

    题目:http://poj.org/problem?id=3254 利用二进制压缩状态,每一个整数代表一行的01情况: 注意预处理出二进制表示下没有两个1相邻的数的方法,我的方法(不知为何)错了,看到 ...

  4. Java集合框架(1)

    Collection接口:它是Java集合框架的一个根接口,也是List.Set和Queue接口的父接口.同时它定义了可用于操作List.Set和Queue的方法—增删改查. Map接口:它提供了一种 ...

  5. GET和POST的区别及get和post关于请求的编解码的问题

    GET和POST的本质区别是什么?        使用GET,form中的数据将编码到url中,而使用POST的form中的数据则在http协议的header中传输.在使用上,当且仅当请求幂等(字面意 ...

  6. hdu 4123 Bob’s Race (dfs树上最远距离+RMQ)

    C - Bob’s Race Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Subm ...

  7. OpenCPN介绍及编译

    OpenCPN介绍及编译 OpenCPN是一个航海应用软件系统,采用wxWidgets界面框架,支持OpenGL,可以跨平台运行在Windows , Linux , Mac电脑上. OpenCPN是一 ...

  8. js上传文件到后台时序列化数据

    let fd = new FormData() // 定义传递的序列化对象,for (let i = 0; i < addArr.length; i++) { // addArr是选中文件的输入 ...

  9. 点击实现CSS样式切换

    如图所示 代码如下图: 特别要注意的是:a标签不会继承上级的color,所以要单独为其设置 参看代码(并非上图代码)如下: <!DOCTYPE html> <html> < ...

  10. Photoshop学习:打开PS之前需要...

    颜色:色相(色彩名称):赤橙黄... H 色彩饱和度(纯度):?% S 明度(明暗):B HSB:人眼所看到的 拾色器 色相环 中间亮 边缘饱和度 黑颜色无色相,灰度有 光的三原色:红绿蓝(RGB) ...