webpack.config.json

entry:入口,可有多个

devtool:'inline-source-map'      source map,遇到错误时,追踪到原文件,而不是编译后的文件

devServer:{contentBase:'编译后的目录,如dist'}        需要下载webpack-dev-server ,命令:webpack-dev-server --open,启动一个web服务器

plugins:[

new CleanWebpackPlugin(['dist']),   需要下载clean-webpack-plugin,设置清理目录,只留下网页需要的文件,清理掉不需要的文件
new HtmlWebPackPlugin({    需要下载html-webpack-plugin,将html重新生成至编译后的目录。
title:'Output Management'
})

]

module: {
rules: [
{
test: /\.css$/,     正则表达式,匹配.css为后缀的文件
use: [
'style-loader',     需下载的模块名称
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,    图片
use: [
'file-loader'                            需下载的模块名称
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,     字体
use: [
'file-loader'         需下载的模块名称
]
},
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader'
 ]
 },
 {
 test: /\.xml$/,                        
+use: [
 'xml-loader'
 ]
}
]
}

webpack 笔记的更多相关文章

  1. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  2. webpack笔记二 管理资源

    webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...

  3. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  4. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  5. Webpack笔记(一)——从这里入门Webpack

    准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...

  6. 入门学习webpack笔记

    注意事项: 1.预热知识:前端模块化.commonJS最好提前了解.commonJS语法最好熟悉. 2.commonJS中,module表示当前模块,module.exports(或者exports) ...

  7. webpack笔记_(3)_First_Project

    知道了怎么样安装,那么学习一下简单的应用吧. 1.安装webpack npm install webpack -g (全局) npm install webpack --save--dev (本地) ...

  8. webpack笔记_(2)_Refusing to install webpack as a dependency of itself

    安装webpack时,出现以下问题: Refusing to install webpack as a dependency of itself npm ERR! Windows_NT npm ERR ...

  9. webpack笔记_(1)_webpack 安装

    webpack不仅可以解析jsx,也可以将es6转换为es5语法.最终,它把这些代码都打包成一个叫bundle.js的文件,我们在html文件中只引入这么一个js文件就可以了! 打包后,引用的语法im ...

随机推荐

  1. [MAC]2015款MACBOOK使用BOOTCAMP安装WIN8.1+多分区

    注意事项: 2013年以前,带光驱的,请使用WinClone安装WIN7或WIN8,或可使用BOOTCAMP制作WINDOWS安装光盘 13-14年,不带光驱的,也能使用WinClone安装WIN7和 ...

  2. bigworld源码分析(4)——BaseAppMgr分析

    BaseAppMgr是用来管理BaseApp的,在整个bigworld中只有一个.本篇就BaseAppMgr的一些核心功能进行分析: (1) BaseAppMgr是如何通知BaseApp创建Entit ...

  3. UserAgent:通过浏览器获取用户浏览器等信息

    User Agent的含义      User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏 ...

  4. linux下安装rabbitmq

    1.安装erlang虚拟机 Rabbitmq基于erlang语言开发,所有需要安装erlang虚拟机.安装erlang有两种方式: 第一种:使用yum安装: wget -O /etc/yum.repo ...

  5. docker - 容器里安装redis

    在docker中安装redis 使用命令行安装redis 下载并解压 wget http://download.redis.io/releases/redis-3.2.6.tar.gz tar -xv ...

  6. js 统计数组中元素的个数

    var all = "02 06 11 12 19 29 09 10 12 19 22 29 08 11 13 19 28 31 07 08 09 15 22 27 10 18 19 29 ...

  7. 脱壳_00_压缩壳_ASPACK

    写在前面的话: Aspack是最常见的一种压缩壳,具有较好的兼容性.压缩率和稳定性,今天我们就来一起分析一下这个壳: 零.分析压缩壳: 0.在开始动态调试前,用PEID和LoadPE查看一些信息,做到 ...

  8. cat more less 命令

    查看文件内容的几种常用的方法   1 在Linux系统中有三种命令可以用来查阅全部的文件,分别是cat.more和less命令.它们查阅文件的使用方法也比较简单都是 命令 文件名 ,但是三者又有着区别 ...

  9. mysql 存入乱码问题

    在使用mysql开发是,遇到一问题,java脚本里面的中文很正常,持久化之后数据库里面的数据则变成乱码,解决方式,在spring配置文件连接中加入指定编码格式,有些系统不需要,有些服务器系统需要,统一 ...

  10. netcat、nc工具随记

    netcat又称nc工具,其最主要的作用就是建立连接并返回两个数据流,剩下的就看各位的想象力了,想象力是很重要的,这也是这个工具的强大之处的所在,所以重要的东西才要说三遍,想象力! 具体参数如下: - ...