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. 【Rust】Rust的安装和配置

    -----------------------参考文档------------------------------------- https://www.rust-lang.org/tools/ins ...

  2. Java学习:方法的使用与注意事项

    方法的使用与注意事项 定义一个方法的格式:public static void 方法名称(){ 方法体 } 如何调用方法,格式: 方法名称(): 方法名称的命名规则和变量一样,使用小驼峰. 方法体:也 ...

  3. Github Markdown 图片如何并排显示

    Github Markdown 图片如何并排显示   要一张图片接着一张图片的写,中间不能有换行.如果换行的话则图片也换行 正确的写法: ![描述](图片链接)![描述](图片链接)![描述](图片链 ...

  4. C# 特性和索引(C#学习笔记06)

    特性 特性(Attribute)是用于在运行时传递程序中各种元素(比如类.方法.结构.枚举.组件等)的行为信息的声明性标签. 特性可以当成一个特殊的类看待 列举特性语法: [attribute(pos ...

  5. 字符串格式连接sqlserver数据库的字段概念解释

    以连接sqlserver数据库举例说明如:“Provider=SQLOLEDB.1;Password=******;Persist Security Info=True;User ID=sa;Init ...

  6. .NET CORE webapi epplus 导入导出 (实习第一个月的笔记)

    最近有个需求就是网页表格里面的数据导出到excel  于是从各位前辈的博客园搜了搜demo  大部分非为两类 都是用的插件NPOI和Eppluse ,因此在这里就介绍Eppluse 用法,还有就是在博 ...

  7. C#中真正的属性

    引言 我们以前课堂上说的类当中的“属性”,其实官方叫法是“字段”或者“域”域(Field).正常使用,把它们当属性理解更加方便快捷,也没有什么问题. 如果要在微软的mvc中充分利用类带来的便利,就有必 ...

  8. Vertx与Spring配合完成DML操作

    服务启动: public static void main( String[] args ) { ApplicationContext context = new AnnotationConfigAp ...

  9. Java自学-异常处理 处理

    Java的异常处理办法 try catch throws 异常处理常见手段: try catch finally throws 步骤 1 : try catch 1.将可能抛出FileNotFound ...

  10. 单词diamaund钻石diamaund英文

    Diamond Di"a*mond (?; 277), n. [OE. diamaund, the hardest iron, steel, diamond, Gr. . Perh. the ...