Webpack配置选项

​ 经历了考研以后,接下来的时间里准备捡起来这些以前学的东西,并且继续向着前端的方向出发,给自己多一条路的选择。话不多说,直接开始。

moudule.exports = {
//首先是入口
entry:'./src/index.js',
//配置生成js的文件名
output:{
filename:'main.js'
},
//配置引入文件可以省略的后缀
//例如 import xxx.js from dsadas == import xxx from dsadas
resolve:{
extensions:['.ts','.tsx','.js']
},
//配置module,用于模块的读取
module:{
//以下配置的就是关于ts的读取
rules:[{
test:/\.tsx?$/,
use:'ts-loader',
exclude:/node_modules/
}]
},
//配置dev-server
devServer:{
//端口
port:8090,
//是否压缩
compress:false,
//主机配置
host:'localhost',
//打包生成的静态目录
contentBase:'./dist',
//stats 只打印错误信息
stats:'errors-only'
},
//配置插件 plugins ,主要用到的插件在这里面配置
plugins:{ }
}

今天的复习,就到这里。

Webpack的配置项的更多相关文章

  1. webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  2. webpack devServer配置项的坑

    本文所用webpack版本为4+,阅读本章的同学请注意区分. webpack默认不需要配置文件 但是你仍可在项目的node_module目录同级目录建立一个webpack.config.js文件进行配 ...

  3. webpack入门-配置项

    一.常用配置 1.enter(表示入口,webpack从此处开始构建) 2.output(配置输出结果) 3.module(关于模块的配置,内部可以配置loader) 4.resolve(配置寻找模块 ...

  4. webpack热更新问题和antd design字体图标库扩展

    标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...

  5. 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.安装 ...

  6. 从0开始搭建vue+webpack脚手架(四)

    之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...

  7. webpack 从入门到工程实践

    from:https://www.jianshu.com/p/9349c30a6b3e?utm_campaign=maleskine&utm_content=note&utm_medi ...

  8. webpack+babel+react操作小结

    最近学习了一下Webpack,个人感觉还是非常实用的,现在总结一下自己的学习笔记. 什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...

  9. webpack 和 code splitting

    Code Splitting指的是代码分割,那么什么是代码分割,webpack和code splitting又有什么样的联系呢? 使用npm run dev:"webpack-dev-ser ...

随机推荐

  1. Elasticsearch IK分词器

    Elasticsearch-IK分词器 一.简介 因为Elasticsearch中默认的标准分词器(analyze)对中文分词不是很友好,会将中文词语拆分成一个一个中文的汉字,所以引入中文分词器-IK ...

  2. 2021 年 iOS 应用程序开发七种最佳语言

    移动应用程序现在几乎是每个在线业务的必备品.最新的 StatCounter 数据显示,多达56% 的在线连接是通过移动设备建立的,这使它们高于平板电脑和计算机.更重要的是,同一个消息来源说,其中27% ...

  3. 重新整理数据结构与算法(c#)—— 图的深度遍历和广度遍历[十一]

    参考网址:https://www.cnblogs.com/aoximin/p/13162635.html 前言 简介图: 在数据的逻辑结构D=(KR)中,如果K中结点对于关系R的前趋和后继的个数不加限 ...

  4. WPF以鼠标当前位置进行缩放

    <Window x:Class="ImageViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx ...

  5. 【springcloud】一文带你搞懂API网关

    作者:aCoder2013 https://github.com/aCoder2013/blog/issues/35 前言 假设你正在开发一个电商网站,那么这里会涉及到很多后端的微服务,比如会员.商品 ...

  6. mzy git学习,禁用Fast forward的普通合并(六)

    git merge --no-ff -m "msg" x-branch:禁用Fast forward的普通合并 通常,合并分支时,如果可能,Git会用Fast forward模式, ...

  7. openCV入门系列教学(一) 图像的读取、展示与保存

    序言 笔者最近做了两个CV领域的项目,因为数据量不足所以主要使用的是传统的CV方法.这时候不得不夸一句opencv库,让复杂的算法原理变得如此简单(调包调参侠表示很骄傲).所以闲暇下来对opencv的 ...

  8. promise小案例

    页面中有个板块,需要多张图片加载完之后才能进行显示 //页面中有个板块 需要多张图片加载完之后才能进行显示 const loadImg = (src) => { return new Promi ...

  9. C# - 习题04_分析代码写出结果i1、i2、c.i、str、c.str

    时间:2017-08-23 整理:byzqy 题目:分析如下代码,写出程序输出结果. 文件:Class1.cs using System; namespace Interview3 { class C ...

  10. PHP小数点后保留位数并四舍五入

    ceil() 函数向上舍入为最接近的整数,进一(k>0).ceil(0.60) --> 1ceil(0.40) --> 1ceil(5) --> 5ceil(5.1) --&g ...