webpack4学习笔记(三)
webpack打包资源文件
1,打包css文件,先安装css-loader和style-loader
npm install --save-dev css-loader style-loader
webpack.config.js配置如下:
module: {
rules: [
...
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
}
2,webpack打包sass文件,先安装node-sass,sass-loader(还需安装css所需的依赖)
npm install --save-dev sass-node sass-style
}
3,webpack打包less文件,先安装less,less-loader(还需安装css所需的依赖)
npm install --save-dev less less-style
...
{
test: /\.scss$/,
use:[ 'style-loader','css-loader','sass-loader'],
},
{
test: /\.less$/,
use:[ 'style-loader','css-loader','less-loader'],
}
4,提取css代码,需要一个插件:extract-text-webpack-plugin,首先安装此插件
npm install --save-dev extract-text-webpack-plugin
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, 'src/main.js'), //入口
},
output: {
filename: 'bundle.js', //输出的文件名
path: path.resolve(__dirname, 'build') //输出文件所在的目录
},
devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
},
module: { // 如何处理项目中不同类型的模块
rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
},
{
test: /\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
},
{
test: /\.scss$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"sass-loader"
}]
})
},
{
test: /\.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"less-loader"
}]
})
}
]
},
plugins: [
new ExtractTextPlugin('css/index.css')
]
}
webpack4学习笔记(三)的更多相关文章
- Webpack4 学习笔记三 ES6+语法降级为ES5
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
- VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
- Java IO学习笔记三
Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...
- NumPy学习笔记 三 股票价格
NumPy学习笔记 三 股票价格 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.&l ...
- Learning ROS for Robotics Programming Second Edition学习笔记(三) 补充 hector_slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Learning ROS for Robotics Programming Second Edition学习笔记(三) indigo rplidar rviz slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
随机推荐
- basic_string
// Components for manipulating sequences of characters -*- C++ -*- // Copyright (C) 1997, 1998, 1999 ...
- python学习笔记(5)--泡菜:永久存储
说明: 1. 导入pickle泡菜模块. 2. wb方式(二进制)创建.pkl文件. 3. pickle.dump把一个数组或什么数据灌进这个新建的文件. 4. 然后就生成了一个pkl文件,用来存放数 ...
- iOS中的动画(转载)
iOS中的动画 最近两天没事在慢慢学习一些动画,好多东西长时间不用都给忘了,找到一篇介绍很详细的文章就粘贴了过来以备复习,原文地址:https://my.oschina.net/aofe/blog/ ...
- HttpURLConnection的使用
import java.io.ByteArrayOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; ...
- [misc]如何在嵌入式平台使用printf功能
转自:http://www.cnblogs.com/liu_xf/archive/2011/04/14/2015726.html 摘要: 当我们在调试代码时,通常需要将程序中的某个变量打印至PC机上, ...
- USB转TTL 下载线 线序定义
产品名称:USB转TTL 下载线 长度 :1米 芯片 :PL2303HX.PL2303TA. 线序定义红+5V, 黑GND, 绿TXD,白RXD
- PHP——修改数据库1
主页面——0126.php 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- gitolite
gitolite: https://github.com/sitaramc/gitolite https://github.com/sitaramc/gitolite/tags
- thinkphp 命名规范
目录和文件命名 目录和文件名采用 小写+下划线,并且以小写字母开头: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致(包括大小写): 类名和 ...
- php 转码
//$names = iconv("UTF-8", "gb2312", $name); //等同于javascript encodeURI("电影&q ...