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. FPGA成神之路

    先占个坑,网上写的都太没有体系了,打算写一个从电路到语法,从软件使用到硬件调试,从IP核调用到时序分析的系列帖子,人就是太懒,想把自己这两年踩的坑分享一下,加油,特种兵

  2. linux中常用命令alias

    1.查看系统中所有的命令别名 alias 2.查看指定的别名 alias 别名 2.设定别名 alias 别名='原命令' 3.删除别名 unalias 别名 4.使别名永久生效 vi ~/.bash ...

  3. 《即时消息技术剖析与实战》学习笔记1——IM系统的架构

    一.IM的应用场景 聊天.直播.在线客服.物联网等所有需要实时互动.高实时性的场景,都需要应用到 IM 技术.

  4. docker 安装tomcat容器和mysql容器

    1. docker pull mysql:5.6 2.docker run -p 3306:3306 --name mysql -v /data/mysql/conf:/etc/mysql/conf. ...

  5. 使用PS打开图片的常见姿势

    我们经常会使用PS对现有的图片进行编辑.所以每个人都会经历打开图片这一步骤. 下面为大家介绍一下PS打开图片的这一步的常见方式吧: 第一种:使用文件资源管理器(也就是双击我的电脑弹出来的窗口) 第二种 ...

  6. html引入公共模块

    如果没有母版页,那么大量相同布局的页面会有很多相同的代码,那么这就提到了一个概念,叫重用性:可以将相同布局的代码放在一个单独的文件,里面写一些公共模块,那么在其他页面只需要在指定位置引入他们就可以了写 ...

  7. C#写入Excel文件方式

    由于在工作中经常要把数据库的统计数据导入Excel文件,进行IO磁盘操作,所以在这里记录下. 首先创建默认文件夹,并返回文件夹路径. private static string CPath(strin ...

  8. drf之接口规范

    web接口 # 请求工具:postman => https://www.getpostman.com/ # 接口:url链接,通过向链接发生不同的类型请求与数据得到相应的响应数据 # http: ...

  9. IDEA控制台中文乱码问题

    Tomcat启动时乱码 在tomcat启动时,控制台中的中文为乱码 在idea安装路径的bin文件夹下,找到idea64.exe.vmoptions这个配置文件,添加如下代码 -Dfile.encod ...

  10. MySQL常用sql语句大全

    创建数据库 1 create database dbname; 删除数据库 1 drop database dbname; 选择数据库 1 use dbname; 创建表 12345678 CREAT ...