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 `` ...
随机推荐
- 不能随便用get和set
有些对象呢,保存一半.如果你只提供get和set,那么备份不了数据. previousState的get和set还是最新的 wtforms InputRequired: DataRequired: i ...
- .NET下使用HTTP请求的正确姿势
来源:Lewis.Zou cnblogs.com/modestmt/p/7724821.html 一.前言 去年9月份的时候我看到过外国朋友关于.NET Framework下HttpClient缺陷的 ...
- linux下僵尸进程的发现与处理
一.概述 僵尸进程是怎么产生的 当子进程退出时,父进程没有调用wait函数或者waitpid()函数等待子进程结束,又没有显式忽略SIGCHLD信号,那么它将一直保持在僵尸状态,如果这时父进程结束了, ...
- 【题解】Luogu P4091 [HEOI2016/TJOI2016]求和
原题传送门 \[\begin{aligned} a n s &=\sum_{i=0}^{n} \sum_{j=0}^{i}\left\{\begin{array}{c}{i} \\ {j}\e ...
- spring Boot 学习(六、Spring Boot与分布式)
一.分布式应用在分布式系统中,国内常用zookeeper+dubbo组合,而Spring Boot推荐使用 全栈的Spring,Spring Boot+Spring Cloud 分布式系统: 单一应用 ...
- 【转】socket通信-C#实现tcp收发图片音视频等字节流数据
在日常碰到的项目中,经常碰到需要收发二进制数据的场景.比如要发送一张图片,要发送一首音频,要发送一个压缩包,要发送一个视频等等.这些数据并非字符串,而是二进制字节流数据.那么如何如何使用SharpSo ...
- 理解 Kubernetes 的亲和性调度
这次给大家介绍下k8s的亲和性调度:nodeSelector.nodeAffinity.podAffinity.Taints以及Tolerations用法. 一般情况下我们部署的 POD 是通过集群自 ...
- YUV与RGB互转各种公式 (YUV与RGB的转换公式有很多种,请注意区别!!!)
一. 公式:基于BT.601-6 BT601 UV 的坐标图(量化后): (横坐标为u,纵坐标为v,左下角为原点) 通过坐标图我们可以看到UV并不会包含整个坐标系,而是呈一个旋转了一定角度的八边形, ...
- C++ GDI图形设备接口
一.概念 1. GDI:(Graphics Device Interfase)图形设备接口,是一个应用程序与输出设备之间的中介. 一方面,GDI向应用程序提供一个与设备无关的编程环境,另一方面,它又以 ...
- Vue3.0报错error: Unexpected console statement (no-console) 解决办法
写项目过程中用ESLint遵守代码规范很有必要,但是对于一些规范也很是无语,比如:‘Unexpected console statement (no-console)’,连console都不能用,这就 ...