webpack 使用配置文件

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 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置非常有用。

时间: 2024-10-25 06:27:31

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

webpack的配置文件

1.路径 __dirname是一个全局变量,在项目html和js中没有单独定义,直接写就可以得到项目的根目录的路径 module.exports={ // __dirname是nodejs里的一个全局变量,它指向的是我们项目的根目录 entry:__dirname+'/src/script/main.js',//入口文件 output:{ path:__dirname+'/dist/js',//打包后输出目录 filename:'bundle.js'//打包后输出的文件 } } 2.不用默认的w

webpack前端构建工具学习总结(三)之webpack.config.js配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件. webpack文档:https://webpack.github.io/docs/ 1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpac

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

一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w

webpack基础第一篇(配置文件)

1.安装mode.js.npm本地环境,lue 2.命令语言 mkdir  webpack_demo  //建立文件夹 cd  webpack_demo  //进入文件夹 npm install -g webpack  //全局安装webpack npm init  //初始化 npm install --save-dev webpack //安装目录 3.建立项目基本结构 src文件夹 ----存放编写的源码 dist文件夹 ----存放webpack打包后的文件 dist下建立index.h

webpack入门

前面的话 在webpack出现之前,市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源.webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载 webpack的内容丰富且杂

webpack入门--前端必备

webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但这不用我们理会,因为 webpack 有着各种健全的加载器(loader)在处理这些事情. 为什么要使用 webpack? 很简单的一个道理,难道写react的同学会不用它

搭建自己的Webpack项目:入门

转自:http://www.tuicool.com/articles/YFZRniq 作为当下最流行的前端打包工具,webpack有自己无与伦比的优势和功能特性,使用webpack打包自己的项目能够大大地提高我们的开发效率.小编整理了一下webpack在项目中的最佳实战分享给大家. 一.什么是webpack 随着网页内容的越来越丰富,在我们的网页上我们经常要用到很多的脚本文件,比如幻灯模块的脚本.列表模块的脚本和搜索模块的脚本等等.如果不对这些文件进行统一的打包,整个页面就会非常的凌乱. 于是,

webpack 超详细配置,使用教程(图文)

博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目. 流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install webpack -g Step3: 使用Git Bash here 或者 cmd cd命令使当

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目