[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-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)用法
我们接着上文，那么在上篇文章的最后，写到了css-loader的用法，如果你用心发现，就能看到我在style.css样式文件中写了一个这样的样式：
module.exports = {
plugins : [
require('autoprefixer')({
browsers : ['last 5 versions']
})
]
}
意思是在postcss-loader中引入autoprefixer插件
修改webpack.config.js中css loader部分的配置:
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', {
loader : 'css-loader',
options : {
importLoaders : 1
},
},
'postcss-loader'
]
}
]
}
}
执行webpack打包，生成之后的css文件，就自动补充css3前缀了:
二、安装less-loader插件
如果我们在modal.js中直接引入modal.less，然后webpack打包，这样会报错
import './modal.less';
let modal = function(){
return {
'component-name' : 'modal'
}
}
export default modal;
报错提示需要一个loader来处理， 我们可以安装less-loader了:
安装: npm install --save-dev less-loader less
安装完成之后，配置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', {
loader : 'css-loader',
options : {
importLoaders : 1
},
},
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}
]
}
]
}
}
当碰到less文件时，交给less-loader处理，然后交给css-loader处理，最后交由style-loader处理，然后执行webpack打包，modal.less文件中样式就被嵌入进来了
三、安装html-loader
安装命令: npm install html-loader --save-dev
modal.js文件引入modal.html
import './modal.less';
import tpl from './modal.html';
let modal = function(){
return {
'component-name' : 'modal',
'tpl' : tpl
}
}
export default modal;
main.js对demo3目录下的index.html文件插入模板(modal.html)
import modal from './components/modal.js';
import './css/style.css';
let App = function(){
var oApp = document.querySelector("#app");
var oModal = new modal();
oApp.innerHTML = oModal.tpl;
}
new App();
demo3目录下的index.html文件，需要添加个div, id为app
webpack.config.js增加一项html-loader的配置
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', {
loader : 'css-loader',
options : {
importLoaders : 1
},
},
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
}
}
]
}
}
然后执行webpack打包命令,就能看到modal.html被插入到id为app的div元素内了
四、修改模板后缀，为模板赋值
安装ejs-loader: npm install ejs-loader --save-dev
在components目录下新建一个文件（modal.ejs）:
<div class="modal">
<div>这个组件的名字是:<%= name %></div>
<% for( var i = 0; i < arr.length; i++ ){ %>
<%= arr[i]%>
<% } %>
</div>
modal.js引入ejs模板
import './modal.less';
// import tpl from './modal.html';
import tpl from './modal.ejs';
let modal = function(){
return {
'component-name' : 'modal',
'tpl' : tpl
}
}
export default modal;
main.js为ejs模板分配数据
import modal from './components/modal.js';
import './css/style.css';
let App = function(){
var oApp = document.querySelector("#app");
var oModal = new modal();
// oApp.innerHTML = oModal.tpl;
oApp.innerHTML = oModal.tpl({
name : 'ghostwu',
arr : [ 'ghostwu', '王朝', '马汉' ],
});
}
new App();
webpack.config.js添加ejs-loader的支持:
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', {
loader : 'css-loader',
options : {
importLoaders : 1
},
},
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
}
},
{
test: /\.(ejs)$/,
use: {
loader: 'ejs-loader',
}
}
]
}
}
然后执行webpack打包命令，就能看见新的ejs模板中的数据被嵌入在id为app的div中
[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-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教程系列7-( babel-loader,css-loader,style-loader)的用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...
- [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 ...
随机推荐
- Hello ReactJS
前言 React学习前先搭好环境,官网的例子看着比较分散.结合webpack就可以体验完整的es6开发流程了. 源码:https://github.com/Ryan-Miao/hello-react- ...
- Linux(1)目录
Linux目录 / :根目录, 一般只存放目录, 在Linux下只有一个根目录. 所有的东西都是从这里开始 /bin, /usr/bin :可执行的二进制文件目录, 如常用的ls, tar, mv, ...
- 如何使用Androidstudio创建一个新项目
首先打开AS,然后 选择第一个选项Start a new Android Studio project 填写包名和项目名,点击next 选择项目类型,点击next 选择UI类型(都是死丢丢帮你生成的) ...
- git中常用的指令
1.初始化仓库 git init2.设置用户名与邮箱 git config --global user.name 'name' git config --global user.email 'emai ...
- 关于appcompat_v7兼容包的详细说明
1.appcompat_v7包的由来? appcompat_v7是Google提供的向下兼容包,是针对API level 7(Android2.1)及以上版本所开发的,其作用是为了让兼容低版本API( ...
- Java中的char究竟能存中文吗？
今天面试被问到"Java中的char能存中文吗?",我回答有的字能有的字不能,结果被嘲笑了,不过我也忘了字符编码的相关知识所以也没能解释.晚上查了下资料,记录一下. 网上搜索这个问 ...
- Linux操作系统-命令-aptitude install unzip
如果linux系统没有自带unzip,请执行aptitude install unzip以安装. 使用到这条Linux命令的场景是: 当我把Jmeter的压缩包(xxx.zip)拷贝到远程的Linux ...
- hibernate 根据数据库表反生成javaBean
- tomcat 组件研究一--启动过程总结
作为java 开发者,从开始学习java 便知道tomcat 这个容器了,但是一直却没有怎么研究过它的内部结构,以前对tomcat的认识也仅仅局限在那几个常用的目录放什么东西,那几个常用的配置文件应该 ...
- iOS app 的 ASLR
这两天逆向一个程序,发现每次image list -o -f 之后,它的基地址都是0x00000,也就是偏移地址是0. 想到这个应该是载入内存时有没有启用偏移有关,于是找了下答案:aslr 百度百科 ...