module.exports = {
entry: "./src/main.js",
output: {
filename: "build/build.js"
},
module: {
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: "style!css" },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: "jsx-loader" }
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: []
};

entry: 页面中的入口文件,可以是字符串路径'./src/main.js',也可以是数组['./a.js','./b.js'],还可以是对象{main: './a.js',home: './b.js'};

output:页面通过webpack打包后生成的目标文件放在什么地方去,我这边是在根目录下生成build文件夹,该文件夹内有一个build.js文件;

resolve:定义了解析模块路径时的配置,常用的就是extensions;可以用来指定模块的后缀,这样在引入模块时就不需要写后缀,全自动实例;

plugins:定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取公用的部分,生成common.js;

module.loaders:是文件的加载器,比如react需要在页面中引入jsx的js源码至页面上来,然后使用该语法,但是通过webpack打包后就不需要再引入JSXTransformer.js;看到上面的加载器;比如jsx-loader加载器就是代表JSXTransformer.js的,还有style-loader和css-loader加载器;因此在使用之前我们需要通过命令把它引入到项目上来

如果设置好了webpack.config.js之后 ,那么就可以在命令行里直播运行webpack命令进行打开;如果配置文件不是叫webpack.config.js,而是叫其他比如:webpack.dev.config.js,那么打开里就要用到--config 来指定配置文件: webpack --config webpack.dev.config.js

webpack.config.js配置信息的说明的更多相关文章

  1. webpack(4)webpack.config.js配置和package.json配置

    前言 上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创 ...

  2. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  3. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  4. webpack webpack.config.js配置

    安装指定版本的webpack npm install webpack@3.6 -g 安装live-server    运行项目插件   输入live-server  运行后自动打开网页 npm ins ...

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

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

  6. vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

    1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...

  7. webpack.config.js配置实例

    const path = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 ...

  8. webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题

    在webpack配置,将ES6转成ES5的时候,,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上.重装了好几遍babel ...

  9. 关于自己配置有关webpack.config.js和vue项目搭建相关步骤

    ## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...

随机推荐

  1. Java的常用API之包装类简介

    包装类 包装类: 基本数据类型,使用起来非常方便,但是没有对应的方法来操作这些基本类型的数据可以使用一个类,把基本类型的数据装起来,在类中定义一些方法,这个类叫做包装类,我们可以使用类中的方法来操作这 ...

  2. Java.util.Math类--数学相关的工具类

    Math类--数学相关的工具类 java.util.Math类是数学相关的工具类,里面提供了大量的静态方法,完成与数学运算相关的操作. public static double abs(double ...

  3. SQL系列(四)—— 唯一值(distinct)

    有时需要查询某列上的不重复的数据,如: SELECT name FROM student; 结果: name lxy lxy lxy lxy 这样的结果显然不符合我们的需求.如何对列数据进行去重,查询 ...

  4. 类、闭包、monand

    类.闭包.monand 三者的相同点都是封装了数据与操作. 类:定义数据类型,倾向于数据的抽象:集合数据为操作提供上下文. 闭包:对环境变量和操作的封装抽象.操作基于环境变量,核心问题是环境变量的管理 ...

  5. Linux学习笔记之安装报错/lib/ld-linux.so.2: bad ELF interpreter

    0x00 64位系统中安装了32位程序解决办法 是因为64位系统中安装了32位程序 解决方法: yum install glibc.i686 0x01 解决交叉编译环境错误 yum install l ...

  6. 分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图

    话说有一天,临近下班无心工作,在网上看各种文章,阅读到了一篇名为<聊聊大麦网UWP版的首页顶部图片联动效果的实现方法>(传递:http://www.cnblogs.com/hippieZh ...

  7. VS开发C++控制台应用程序(示例)

    注:笔者使用的VS版本为2019.1.打开VS2019,选择文件 -> 新建 -> 项目 2.选择项目新建项目时选择C++“控制台应用”语言:C++平台:Windows项目类型:控制台 3 ...

  8. 解决TensorFlow在terminal中正常但在jupyter notebook中报错的方案

    报错情况: # 本地运行正常,jupyter中无法 import tensorflow ImportError: libcublas.so.10.0: cannot open shared objec ...

  9. BUAA-OO-2019 第二单元总结

    第五次作业 本次作业,需要完成的任务为单部多线程傻瓜调度(FAFS)电梯的模拟. 设计策略 先来先服务的单电梯是一个标准的"生产者-消费者"模型.虽然在本次作业中调度器似乎是不必要 ...

  10. Workerman MySQL组件Connection用法总结

    一.初始化连接 $db = new \Workerman\MySQL\Connection('host', 'port', 'user', 'password', 'db_name'); 二.获取所有 ...