[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中