webpack入门     大多数项目会需要很复杂的设置,这就是为什么webpack要支持配置文件。这比在终端中输入大量命令要高效的多,所以让我们常见一个取代CLI选项方式的配置文件

新建 webpack.config.js

const path = require('path');

module.exports = {
entry: './src/index.js',//设置入口文件
output: {
filename: 'bundle.js',//生成的输出文件名称
path: path.resolve(__dirname, 'dist')//输出文件的路径
}
};

构建配置文件:

./node_modules/.bin/webpack --config webpack.config.js

运行结果:

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]

tip:如果 webpack.config.js 存在,则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置非常有用。

webpack 使用配置文件的更多相关文章

  1. 跟我一起学习webpack使用配置文件(二)

    接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目 ...

  2. webpack基本配置文件(含解释)

    const path = require('path'); // 以下文件需要npm i 文件名 --save-dev const uglify = require('uglifyjs-webpack ...

  3. webpack的配置文件

    1.路径 __dirname是一个全局变量,在项目html和js中没有单独定义,直接写就可以得到项目的根目录的路径 module.exports={ // __dirname是nodejs里的一个全局 ...

  4. webpack基本配置文件

    entry(入口文件) 可以传字符串,数组,对象三种格式(字符串和数组默认生成main.js,均生成一个文件,对象有几个入口文件,生成几个文件).默认值为./src/index.js.entry可以传 ...

  5. webpack的配置文件entry与output

    在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组,会将数组里面的文件一起打包到bundle.js entry也可以是一个对象. 如果outpu ...

  6. vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)

    webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...

  7. webpack的配置文件[webpack.config.js]

    如果项目里没有webpack.config.js这个文件,webpack会使用它本身内置在源码里的配置项. webpack.config.js这个配置名称可以通过指令修改 npx webpack -- ...

  8. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  9. react暴露webpack配置文件

    在react中安装create-react-app脚手架新建项目,但是新建的项目中没有配置文件. webpack的配置文件webpack.base.conf.js隐藏在了node_modules文件夹 ...

随机推荐

  1. 【Todo】RTP/RTCP/RTSP/SIP/SDP 等多媒体传输和会话协议

    参考 http://m.blog.csdn.net/article/details?id=6211447

  2. jmeter - DBC Request之Query Type

    工作中遇到这样一个问题: 需要准备10W条测试数据,利用jmeter中的JDBC Request向数据库中批量插入这些数据(只要主键不重复就可以,利用函数助手中的Random将主键的ID末尾五位数随机 ...

  3. ivy在eclipse中的重新加载

    ivy在eclipse中的重新加载 如果由于网速的原因,导致了ivy没有正常的加载,可以进行ivy的重新加载: 1,右键点击项目,选择属性->Java Build Path->Librat ...

  4. Python——正則表達式(2)

    本文译自官方文档:Regular Expression HOWTO 參考文章:Python--正則表達式(1) 全文下载 :Python正則表達式基础 ======================== ...

  5. 走入asp.net mvc不归路:[5]Action的返回

    asp.net mvc提供了多种返回方式,一方面使得视图可以重用,另一方面灵活强大,有直接返回视图,返回Json,返回文件流,返回到相同Controller的Action,返回到另一个Controll ...

  6. location.href用法总结

    javascript中的location.href有很多种用法,主要如下. self.location.href=”/url” 当前页面打开URL页面 location.href=”/url” 当前页 ...

  7. javascript读取和改动原型特别须要注意的事儿,由于原型的读写不具有对等性

    对于从原型对象继承而来的成员,其读和写具有内在的不正确等性.比方有一个对象A,假设它的原型对象是B.B的原型对象是null.假设我们须要读取A对象的name属性值,那么JS会优先在A中查找.假设找到了 ...

  8. Quartz深入浅出(二)

    Hello Quartz / 本文通过一个简单的样例让大家高速了解Quartz,上手.并了解Quartz内的一些关键对象 如 Scheduler.Job.Trigger.JobExecutionCon ...

  9. sanic官方文档解析之logging和request Data

    1,sanic的logging: Sanic允许有做不同类型的日志(通过的日志,错误的日志),在基于Python3的日志API接口请求,你必须具备基本的Python3的日志知识,在你如果想创建一个新的 ...

  10. Java的编程逻辑--15章 并发基础

    1.run()和start()的区别 2.线程的基本属性和方法 id:一个递增的整数,每创建一个线程就加一 name 优先级:从1到10,默认为5,会映射到系统中的优先级.数字越大,要优先级越高 状态 ...