webpack.config.js配置信息的说明
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配置信息的说明的更多相关文章
- webpack(4)webpack.config.js配置和package.json配置
前言 上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创 ...
- 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 一. 问题描述 在 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
- webpack webpack.config.js配置
安装指定版本的webpack npm install webpack@3.6 -g 安装live-server 运行项目插件 输入live-server 运行后自动打开网页 npm ins ...
- webpack.config.js配置入口出口文件
目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...
- 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.安装 ...
- webpack.config.js配置实例
const path = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 ...
- webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题
在webpack配置,将ES6转成ES5的时候,,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上.重装了好几遍babel ...
- 关于自己配置有关webpack.config.js和vue项目搭建相关步骤
## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...
随机推荐
- Python中的垃圾回收机制(转)
原文:https://foofish.net/python-gc.html GC作为现代编程语言的自动内存管理机制,专注于两件事:1. 找到内存中无用的垃圾资源 2. 清除这些垃圾并把内存让出来给其他 ...
- lightGBM gpu环境配置
推荐先看一手官方的Installation Guide.我用的是ubuntu 16.04,一些要求如下图: 主要是OpenCL以及libboost两个环境的要求. (1) OpenCL的安装.我这里之 ...
- Maven distributionManagement 分发构件至远程仓库
https://blog.csdn.net/qq827245563/article/details/82661583 maven发布到本地仓库,和私服https://blog.csdn.net/u01 ...
- 关于注解sql和动态sql的写法
注解写sql一般写在mapper层,如果sql语句复杂建议不要写注解sql 拼接容易出错 二动态sql的话要在 main 下面创建一个resource ——mapper—— Mapper.xml 再在 ...
- C#MVC中ViewData和ViewBag的使用
ViewBag和ViewData的区别 ViewData ViewBag 它是key/value字典集合 它是dynamic类型对象 从asp.net mvc1就有了 从asp.netmvc3才有 基 ...
- c#十进制转换
1.方法定义 /// <summary> /// 十进制转换 /// </summary> /// <param name="hexChar"> ...
- 分布式系统根基:物理时钟和Lamport逻辑时钟
分布式系统解决了传统单体架构的单点问题和性能容量问题,另一方面也带来了很多的问题,其中一个问题就是多节点的时间同步问题:不同机器上的物理时钟难以同步,导致无法区分在分布式系统中多个节点的事件时序.19 ...
- ubuntu ufw相关命令
引自:http://www.cnblogs.com/jiangyao/archive/2010/05/19/1738909.html 就这句话就够了,下面的可以不看 sudo ufw enable| ...
- 第一章 Maven 安装配置
Maven基于(POM)项目对象模型,通过一小段描述信息来管理项目的构建.文档.和报告的项目管理软件,类似于php 的管理构建工具composer. 有关详细的Maven学习,可以参考学习https: ...
- 2019 百合佳缘java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.百合佳缘等公司offer,岗位是Java后端开发,因为发展原因最终选择去了百合佳缘,入职一年时间了,也成为了面 ...