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. [转帖]什么是IOC(控制反转)、DI(依赖注入)

    什么是IOC(控制反转).DI(依赖注入) 2018-08-22 21:29:13 Ming339456 阅读数 20642   原文地址(摘要了部分内容):https://blog.csdn.net ...

  2. sql中筛选第一条记录【分组排序】

    问题描述 我们现在有一张表titles,共有4个字段,分别是emp_no(员工编号),title(职位),from_date(起始时间),to_date(结束时间),记录的是员工在某个时间段内职位名称 ...

  3. 【题解】Kathy函数 [BZOJ1223] [P2235] [HNOI2002]

    [题解]Kathy函数 [BZOJ1223] [P2235] [HNOI2002] 这几疯狂刷了数位\(dp\)的题,到这道题时被卡了一天,一看大佬的讲解发现居然是求回文数╮(╯_╰)╭ 感觉被大佬狠 ...

  4. 『Andrew and Chemistry 树同构』

    Andrew and Chemistry Description During the chemistry lesson Andrew learned that the saturated hydro ...

  5. golang---命令源码文件与命令行参数

    命令源码文件是程序的运行入口,是每个可独立运行的程序必须拥有的. import "flag"  flag包实现了命令行参数的解析.每个参数认为一条记录,根据实际进行定义,到一个se ...

  6. Win10应用商城删除后部分应用出错的解决方案

    出错图示 解决方案 查找完整包名:Get-AppxPackage -allusers | Select Name, PackageFullName Add-appxpackage -register ...

  7. 用友U9 部署

    手工部署 对于插件式开发,或者自定义单据开发,无法用U9构造系统生成补丁包,所以必须手工部署. 部署文件 脚本:直接执行(最好有事务保护) Deploy文件:拷贝到Potal\ApplicationL ...

  8. WebAPI 权限控制解决方案——Phenix.NET企业应用软件快速开发平台.使用指南.21.WebAPI服务(三)

    21.1   数据服务 21.1.1基本操作功能 Phenixヾ的数据服务,提供了如下的基本操作: 功能 Type URI 参数 完整获取实体集合对象 GET api/Data 分页获取实体集合对象 ...

  9. delegate、Action、Func的用法

    委托的特点 委托类似于 C++ 函数指针,但它们是类型安全的. 委托允许将方法作为参数进行传递. 委托可用于定义回调方法. 委托可以链接在一起. delegate的用法 delegate void B ...

  10. js 递归遍历对象 插入属性 遍历树结构

    // 向 info下面 每一项 插入 isShow test() { const _this = this; _this.info.isShow = false; let iteration = fu ...