[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
[js高手之路]深入浅出webpack教程系列索引目录:
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等.
官方参考文档:https://webpack.js.org/loaders/
我们从本文开始,重新搭建一个项目结构来解释下loader的用法.
一、项目结构搭建准备:
目录结构:
demo3
dist
src
components
modal.html
modal.js
modal.less
main.js
index.html
package.json
webpack.config.js
需要安装的插件等:
1,npm init --yes( 初始化项目的package.json )
2,npm install webpack@3.5.6 -g ( 全局安装webapck )
3,npm install webpack@3.5.6 --save-dev (局部安装webpack )
4,npm install html-webpack-plugin --save-dev ( 安装html-webpack-plugin插件 )
相关的文件代码:
webpack.config.js代码
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './src/main.js',
output : {
path : __dirname + '/dist',
filename : 'js/[name].bundle.js',
},
plugins : [
new htmlWebpackPlugin({
filename : 'index.html',
template : 'index.html',
inject : true
})
]
}
main.js文件代码:
import modal from './components/modal.js';
let App = function(){
console.log( '项目入口文件main.js' );
}
new App();
modal.html文件代码:
<div class="modal">
<div class="modal-heading">模态框头部 - by ghostwu</div>
<div class="modal-body">模态框内容部分 - by ghostwu</div>
</div>
modal.js文件代码:
let modal = function(){
return {
'component-name' : 'modal'
}
}
export default modal;
modal.less文件代码:
@c1 : #09f;
@c2 : #666;
.modal {
padding:20px;
div {
margin: 10px;
}
}
.modal-heading {
background:@c1;
}
.modal-body {
background:@c2;
}
写完上面的结构和代码之后,我们开始执行webpack打包命令,然后安装babel-loader,把es6转成es5
官方参考文档:https://webpack.js.org/loaders/babel-loader/
安装: npm install --save-dev babel-loader babel-core babel-preset-env webpack
配置webpack.config.js文件
var htmlWebpackPlugin = require('html-webpack-plugin');
let path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'js/[name].bundle.js',
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
include: [
path.resolve(__dirname, "src"),
],
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
}
解释下新增加的配置:
rules就是配置规则,他是一个数组,每一项为一个对象,如果有多个loader,那就用多个对象, test: /\.js$/ 就是以.js结尾的文件, exclude:排除node_modules这个目录,意思就是不要去这个目录下处理.js的文件,有什么好处呢?大大提高打包的速度. include里面的配置意思就是把src目录下面的js文件作为处理的目标,use配置就是使用babel-loader
二、使用css
1,在src目录下新建一个css目录,在该目录下面新建一个css文件: style.css,代码如下:
html,body{
margin:;
padding:;
}
body {
background: #08f;
}
ul,li {
list-style-type:none;
}
div {
transition: all ease 1s;
}
然后在main.js中导入css文件
import modal from './components/modal.js';
import './css/style.css';
let App = function(){
console.log( '项目入口文件main.js' );
}
new App();
执行webpack打包命令,会报错,提示需要一个loader,我们安装css-loader和style-loader
安装命令: npm install css-loader style-loader --save-dev
官方参考文档:https://webpack.js.org/loaders/css-loader/
然后配置webpack.config.js:
var htmlWebpackPlugin = require('html-webpack-plugin');
let path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'js/[name].bundle.js',
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
include: [
path.resolve(__dirname, "src"),
],
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/,
exclude: /(node_modules)/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
执行webpack打包, 你就能看到css被内嵌到文档中了, css-loader是处理css文件,style-loader是把css内嵌到浏览器
[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法的更多相关文章
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
随机推荐
- 性能测试——jmeter环境搭建,录制脚本,jmeter参数化CSV
一.Jmeter+jdk环境搭建 1.http://www.oracle.com/technetwork/java/javase/downloads/index.html,下载jdk. 直接安装就行了 ...
- ES6字符串扩展
前面的话 字符串是编程中重要的数据类型,只有熟练掌握字符串操作才能更高效地开发程序.JS字符串的特性总是落后于其它语言,例如,直到 ES5 中字符串才获得了 trim() 方法.而 ES6 则继续添加 ...
- 记Angular与Django REST框架的一次合作(1):分离 or 不分离,it's the question
前言:本次尝试源于我们内部的一个项目,由于前端逻辑比较复杂,就打算将前后端分开来开发.由于之前用Django开发过软件,对Angular.js(Angular 1.0版)也有一定的了解,因此就将技术路 ...
- 【NO.7】HTTP请求-参数化
http://123.456.7.89:8080/article/relation/channel/0038/keyword/movie/start/0/size/20/ 简单说一下这个URL的意思也 ...
- Maven干货
好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m ...
- Hibernate(一)
1.1Hibernate框架概述 1.1.1什么是Hibernate? Hibernate是轻量级JavaEE应用的持久层解决方案,是一个关系数据库ORM框架. ORM就是通过将Java对象映射到数据 ...
- python 如何在一个for循环中遍历两个列表
是我在看<笨方法学python>过程中发现有一行代码看不懂--" for sentence in snippet, phrase:",所以研究了半天,感觉挺有收获的.所 ...
- [undefined,1] 和 [,1]的区别在哪里--认识js中的稀疏数组
事情是这样的 今天我想写一个能快速生成一个自然数数组的函数,就是[0,1,2,3]这样的,然后我写了下面的代码: new Array(10).map((item, index) => { ret ...
- Python第一天---第一个Python程序
1.我的环境是windows下,需要安装notepad++,安装Python2,配置环境变量(百度下可以见) 2.打开cmd窗口-----输入I: [输入要在哪个磁盘存储python代码(我的在I: ...
- 家中路由添加静态IP映射(一)
登录路由器配置页面,选择更多功能来添加IP和MAC地址映射关系