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. FRP represents an intersection of two programming paradigms.

    FRP represents an intersection of two programming paradigms. Functional programming Functional progr ...

  2. 使用Dbvisualizer 连接 Elasticsearch

    Dbvisualizer 安装 从网上下载该软件,并破解激活 下载地址:http://www.ddooo.com/softdown/142713.htm 1.下载解压,得到dbvisualizer p ...

  3. docker离线导入导出镜像

    docker save -o mysqlies.tar 5ada6380f248(镜像id)    # 镜像id是要导出的 有镜像的机器  在有镜像的机器上执行docker load --input ...

  4. 阿里云RDS数据库sql server 导入数据并添加作业小结

    在阿里云购买ECS服务器和RDS数据库时,要注意网络类型要一致,最好都是VPC,否则ECS不能在内网访问RDS,只能从外网访问:在RDS控制台左侧,数据库安全性的IP白名单中添加ECS外网IP:在数据 ...

  5. 树莓派4B安装Raspbian系统及配置

    2019/11/11, 树莓派4B, Raspbian Buster 摘要:给树莓派4B安装系统及基础配置 树莓派实验室参考文档 准备工具 树莓派4B硬件 SD卡格式化工具 SD Formatter ...

  6. c#高效准确的条形码、线性条码、QR二维码读写类库-SharpBarcode介绍

    SharpBarcode是一款支持.NET(C#,VB)的高效易用的条形码.QR二维码的读取和生成类库. 主要功能: 1.支持几乎所有常见类型的线性条形码和QR二维码的读取,高效读取,准确率高. 2. ...

  7. The Xor-longest Path(trie树)

    题目: #10056. 「一本通 2.3 练习 5」The XOR-longest Path 解析: 做完#10051后就不是很难了 继续利用异或的性质有\(dis(u,v) = dis(1,u)\o ...

  8. [译] Ruby如何访问Excel文件

    Parsing Excel Files with Ruby  BY: MATT NEDRICH   翻译:佣工7001 本文中,我将会评判几种Ruby语言访问Excel文件的库.我将要讨论针对不同格式 ...

  9. ip2region.jar实现ip转地址

    ip转地址 根据ip地址查询出所在地址. GitHub地址 https://github.com/lionsoul2014/ip2region/ pom坐标 <dependency> &l ...

  10. box-shadow 模糊半径与扩展半径

    关于box-shadow的基本用法参阅CSS3 box-shadow一章节. 此属性用来设置元素的阴影效果,语法结构如下: box-shadow:h-shadow v-shadow blur spre ...