[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式:

div {

transition: all ease 1s;

}

一、这是一个css3的过渡样式,我们知道,写css3的时候,需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件

安装postcss-loader: npm install postcss-loader --save-dev

安装autoprefixer: npm install autoprefixer --save-dev

在demo3目录下面新建一个postcss.config.js,代码如下:

1 module.exports = {
2     plugins : [
3         require(‘autoprefixer‘)({
4             browsers : [‘last 5 versions‘]
5         })
6     ]
7 }

意思是在postcss-loader中引入autoprefixer插件

修改webpack.config.js中css loader部分的配置:

 1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 let path = require(‘path‘);
 3 module.exports = {
 4     entry: ‘./src/main.js‘,
 5     output: {
 6         path: __dirname + ‘/dist‘,
 7         filename: ‘js/[name].bundle.js‘,
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: ‘index.html‘,
12             template: ‘index.html‘,
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: ‘babel-loader‘,
26                     options: {
27                         presets: [‘env‘]
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [
35                     ‘style-loader‘, {
36                         loader : ‘css-loader‘,
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     ‘postcss-loader‘
42                 ]
43             }
44         ]
45     }
46 }

执行webpack打包,生成之后的css文件,就自动补充css3前缀了:

二、安装less-loader插件

如果我们在modal.js中直接引入modal.less,然后webpack打包,这样会报错

1 import ‘./modal.less‘;
2 let modal = function(){
3     return {
4         ‘component-name‘ : ‘modal‘
5     }
6 }
7 export default modal;

报错提示需要一个loader来处理, 我们可以安装less-loader了:

安装: npm install --save-dev less-loader less

安装完成之后,配置webpack.config.js

 1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 let path = require(‘path‘);
 3 module.exports = {
 4     entry: ‘./src/main.js‘,
 5     output: {
 6         path: __dirname + ‘/dist‘,
 7         filename: ‘js/[name].bundle.js‘,
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: ‘index.html‘,
12             template: ‘index.html‘,
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: ‘babel-loader‘,
26                     options: {
27                         presets: [‘env‘]
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [
35                     ‘style-loader‘, {
36                         loader : ‘css-loader‘,
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     ‘postcss-loader‘
42                 ]
43             },
44             {
45                 test: /\.less$/,
46                 use: [
47                     {
48                         loader: "style-loader"
49                     }, {
50                         loader: "css-loader"
51                     }, {
52                         loader: "less-loader"
53                     }
54                 ]
55             }
56         ]
57     }
58 }

当碰到less文件时,交给less-loader处理,然后交给css-loader处理,最后交由style-loader处理,然后执行webpack打包,modal.less文件中样式就被嵌入进来了

三、安装html-loader

安装命令: npm install html-loader --save-dev

modal.js文件引入modal.html

1 import ‘./modal.less‘;
2 import tpl from ‘./modal.html‘;
3 let modal = function(){
4     return {
5         ‘component-name‘ : ‘modal‘,
6         ‘tpl‘ : tpl
7     }
8 }
9 export default modal;

main.js对demo3目录下的index.html文件插入模板(modal.html)

1 import modal from ‘./components/modal.js‘;
2 import ‘./css/style.css‘;
3 let App = function(){
4     var oApp = document.querySelector("#app");
5     var oModal = new modal();
6     oApp.innerHTML = oModal.tpl;
7 }
8 new App();

demo3目录下的index.html文件,需要添加个div, id为app

webpack.config.js增加一项html-loader的配置

 1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 let path = require(‘path‘);
 3 module.exports = {
 4     entry: ‘./src/main.js‘,
 5     output: {
 6         path: __dirname + ‘/dist‘,
 7         filename: ‘js/[name].bundle.js‘,
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: ‘index.html‘,
12             template: ‘index.html‘,
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: ‘babel-loader‘,
26                     options: {
27                         presets: [‘env‘]
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [
35                     ‘style-loader‘, {
36                         loader : ‘css-loader‘,
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     ‘postcss-loader‘
42                 ]
43             },
44             {
45                 test: /\.less$/,
46                 use: [
47                     {
48                         loader: "style-loader"
49                     }, {
50                         loader: "css-loader"
51                     }, {
52                         loader: "less-loader"
53                     }
54                 ]
55             },
56             {
57                 test: /\.(html)$/,
58                 use: {
59                     loader: ‘html-loader‘,
60                 }
61             }
62         ]
63     }
64 }

然后执行webpack打包命令,就能看到modal.html被插入到id为app的div元素内了

四、修改模板后缀,为模板赋值

安装ejs-loader: npm install ejs-loader --save-dev

在components目录下新建一个文件(modal.ejs):

1 <div class="modal">
2     <div>这个组件的名字是:<%= name %></div>
3     <% for( var i = 0; i < arr.length; i++ ){ %>
4         <%= arr[i]%>
5     <% } %>
6 </div>

modal.js引入ejs模板

 1 import ‘./modal.less‘;
 2 // import tpl from ‘./modal.html‘;
 3 import tpl from ‘./modal.ejs‘;
 4 let modal = function(){
 5     return {
 6         ‘component-name‘ : ‘modal‘,
 7         ‘tpl‘ : tpl
 8     }
 9 }
10 export default modal;

main.js为ejs模板分配数据

 1 import modal from ‘./components/modal.js‘;
 2 import ‘./css/style.css‘;
 3 let App = function(){
 4     var oApp = document.querySelector("#app");
 5     var oModal = new modal();
 6     // oApp.innerHTML = oModal.tpl;
 7     oApp.innerHTML = oModal.tpl({
 8         name : ‘ghostwu‘,
 9         arr : [ ‘ghostwu‘, ‘王朝‘, ‘马汉‘ ],
10     });
11 }
12 new App();

webpack.config.js添加ejs-loader的支持:

 1 var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 let path = require(‘path‘);
 3 module.exports = {
 4     entry: ‘./src/main.js‘,
 5     output: {
 6         path: __dirname + ‘/dist‘,
 7         filename: ‘js/[name].bundle.js‘,
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: ‘index.html‘,
12             template: ‘index.html‘,
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: ‘babel-loader‘,
26                     options: {
27                         presets: [‘env‘]
28                     }
29                 }
30             },
31             {
32                 test: /\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [
35                     ‘style-loader‘, {
36                         loader : ‘css-loader‘,
37                         options : {
38                             importLoaders : 1
39                         },
40                     },
41                     ‘postcss-loader‘
42                 ]
43             },
44             {
45                 test: /\.less$/,
46                 use: [
47                     {
48                         loader: "style-loader"
49                     }, {
50                         loader: "css-loader"
51                     }, {
52                         loader: "less-loader"
53                     }
54                 ]
55             },
56             {
57                 test: /\.(html)$/,
58                 use: {
59                     loader: ‘html-loader‘,
60                 }
61             },
62             {
63                 test: /\.(ejs)$/,
64                 use: {
65                     loader: ‘ejs-loader‘,
66                 }
67             }
68         ]
69     }
70 }

然后执行webpack打包命令,就能看见新的ejs模板中的数据被嵌入在id为app的div中

时间: 2024-10-20 06:03:08

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法的相关文章

[js高手之路]深入浅出webpack教程系列9-打包图片(file-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教程系

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install [email protected] --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目 首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这

[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等. 官方参考文档:https://webpack.js.org/loaders/ 我们从本文开始,重新搭建一个项目结构来解释下loader的用法. 一.项目结构搭建准备: 目录结构: 1 demo3 2 dist 3 src 4 components 5 modal.

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 2 module.exports = { 3 entry : ['./src/js/main.js', './src/js/

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢?,我们可以使用插件html-webpack-plugin,首先安装这个插件npm install html-webpack-plugin --save-dev,好的,接下来就开始用这个插件了 官方参考文档: 插件通用用法:https://webpack.j

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意的添加自定义的数据 webpack.dev.config.js文件: 1 var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 module.exports = { 3 entry : { 4 main : './src/js/main.

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他的配置选项的探讨. 一.chunks选项 这个属性非常有用,可以指定某个页面加载哪些chunk( 如:js文件 ) 我们可以用他做多个页面模板的生成. 比如,我们在实际开发中,做一个博客网站,一般来说有首页,文章列表页,文章详情页等等,这些页面都有一个特点,都要引入一些公共的js文件以及该页面特有的

[js高手之路]深入浅出webpack系列1-安装与基本打包用法和命令参数

webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧. 第一步.安装webpack 新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-de

[js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般都有Symbol.iterator属性,你可以在控制台中用console.dir打印数组,Map,Set,在他们的原型对象(prototype)上面就能找到.这个属性与迭代器密切相关,通过该函数可以返回一个迭代器,下文,我会举一个例子.一般来说所有的集合对象(数组,Set,Map 以及字符串)都是可