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 `` ...
随机推荐
- Linux平台上常用到的c语言开发程序
Linux操作系统上大部分应用程序都是基于C语言开发的.小编将简单介绍Linux平台上常用的C语言开发程序. 一.C程序的结构1.函数 必须有一个且只能有一个主函数main(),主函数的名为main. ...
- ETCD 添加节点报错 tocommit(2314438) is out of range [lastIndex(0)]. Was the raft log corrupted, truncated, or lost?
生产环境中一台ETCD节点宕机之后,添加新的节点的时候出现以下错误, tocommit(2314438) is out of range [lastIndex(0)]. Was the raft lo ...
- [Atcoder AGC032C]Three Circuits
题目大意:有一张$n$个点$m$条边的无向连通图,判断是否可以从中分出$3$个环,满足三个环覆盖整张图并且没有重复的边.$n,m\leqslant10^5$ 题解:分类讨论.有度数为奇肯定不行,因为连 ...
- SSRS连接ORACLE数据库制作报表
SSRS报表基于ORACLE数据库做报表示例. 开发环境:VS2010 SQL SERVER 数据库:SQL SERVER 2012 PS:数据库连接部分可能有还有个问题就是ORACLE数据源这一部分 ...
- javascript Class.method vs Class.prototype.method(类方法和对象方法)
在stackoverflow上看到一个这样的提问,以下代码有什么区别? Class.method = function () { /* code */ } Class.prototype.method ...
- Computer Networking: A Top Down Approach
目录 Chapter 1: Computer Networks and the Internet 1. What is the Internet? 2. The Network Edge 3. The ...
- C# 静态方法中获取类的名称
静态方法中用: string className = System.Reflection.MethodBase.GetCurrentMethod().ReflectedType.FullName; 非 ...
- SpringCloud高并发性能优化
1. SpringCloud高并发性能优化 1.1. 前言 当系统的用户量上来,每秒QPS上千后,可能就会导致系统的各种卡顿,超时等情况,这时优化操作不可避免 1.2. 优化步骤 第一步:优化大SQL ...
- JavaScript 之 location 对象
一.location 对象 location 对象是 window 对象下的一个属性,使用的时候可以省略 window 对象. 常用属性: location.href = 'http://www.ba ...
- 单词cymophanite猫眼石cymophanite英语
金绿石的猫眼石(Cymophanite)是所谓正宗的猫眼石,非常罕有,尤其是5卡以上而质优的,其售价可以高达七万多港元一卡. 相传这类猫眼石是宝石学家的宝石,从此可知其地位在珠宝玉石之中的重要性.颜色 ...