详解webpack进阶之loader篇
webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder
一、loaders之 预处理
- css-loader 处理css中路径引用等问题
- style-loader 动态把样式写入css
- sass-loader scss编译器
- less-loader less编译器
- postcss-loader scss再处理
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
栗子:
module: {
loaders: [
{test: /\.css$/, loader: "style!css?sourceMap!postcss"},
{test: /\.less$/, loader: "style!css!less|postcss"},
{test: /\.scss$/, loader: "style!css!sass|postcss"}
]
}
二、loaders之 js处理
- babel-loader
- jsx-loader
npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader
栗子
新建一个名字为.babelrc的文件
{
"presets": ["es2015","react"],
"plugins":["antd"]
}
新建一个名字为webpack.config.js文件
module.exports ={
entry: './entry.js',
output: { path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/},
{test: /\.jsx$/, loader: "jsx-loader"}
{test: /.css$/, loader: 'style!css'} ]
}
};
三、loaders之 图片处理
url-loader
npm install --save-dev url-loadr
module: {
loaders: [
{test: /\.(jpg|png)$/, loader: "url?limit=8192"},
]
}
四、loaders之 文件处理
file-loader
npm install --save-dev file-loader
module: {
loaders: [
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file'
},
]
}
五、loaders之 json处理
json-loader
npm install --save-dev json-loader
module: {
loaders: [
{test: /\.json$/,loader: 'json'},
]
}
六、loaders之 html处理
raw-loader
npm install --save-dev raw-loader
module: {
loaders: [
{ test: /\.html$/,loader: 'raw'},
]
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍详解webpack进阶之插件篇，包括了详解webpack进阶之插件篇的使用技巧和注意事项，需要的朋友参考一下 一、插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的：Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website，也就是说它是一个自动
-
本文向大家介绍详解webpack之scss和postcss-loader的配置，包括了详解webpack之scss和postcss-loader的配置的使用技巧和注意事项，需要的朋友参考一下 本文介绍了详解webpack之scss和postcss-loader的配置，分享给大家，具体如下： 开始 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀。当前pos
-
本文向大家介绍IOS CocoaPods详解之进阶篇，包括了IOS CocoaPods详解之进阶篇的使用技巧和注意事项，需要的朋友参考一下 一、Podfile.lock文件 上文讲过，在开始使用CocoaPods，执行完pod install之后，会生成一个Podfile.lock文件。这个文件看起来跟我们关系不大，实际上绝对不应该忽略它。 该文件用于保存已经安装的Pods依赖库的版本，通过Coc
-
本文向大家介绍python pytest进阶之conftest.py详解，包括了python pytest进阶之conftest.py详解的使用技巧和注意事项，需要的朋友参考一下 前言 前面几篇文章基本上已经了解了pytest 命令使用，收集用例，finxture使用及作用范围，今天简单介绍一下conftest.py文件的作用和实际项目中如是使用此文件！ 实例场景 首先们思考这样一个问题：如果我们
-
本文向大家介绍python pytest进阶之fixture详解，包括了python pytest进阶之fixture详解的使用技巧和注意事项，需要的朋友参考一下 前言 学pytest就不得不说fixture，fixture是pytest的精髓所在，就像unittest中的setup和teardown一样，如果不学fixture那么使用pytest和使用unittest是没什么区别的(个人理解)。
-
本文向大家介绍python pytest进阶之xunit fixture详解，包括了python pytest进阶之xunit fixture详解的使用技巧和注意事项，需要的朋友参考一下 前言 今天我们再说一下pytest框架和unittest框架相同的fixture的使用， 了解unittest的同学应该知道我们在初始化环境和销毁工作时，unittest使用的是setUp，tearDown方法，
-
本文向大家介绍python进阶教程之动态类型详解，包括了python进阶教程之动态类型详解的使用技巧和注意事项，需要的朋友参考一下 动态类型(dynamic typing)是Python另一个重要的核心概念。我们之前说过，Python的变量(variable)不需要声明，而在赋值时，变量可以重新赋值为任意值。这些都与动态类型的概念相关。 动态类型 在我们接触的对象中，有一类特殊的对象，是用于存储数
-
django-webpack-loader Read http://owaislone.org/blog/webpack-plus-reactjs-and-django/ for a detailed step by step guide on setting up webpack with django using this library. Use webpack to generate yo