webpack深入与实战_技术笔记

weixin_慕妹9595471 2022-02-05

1、postcss-loader：浏览器兼容，给需要写兼容代码的样式添加前缀
2、loader是按照从右往左的顺序执行的

0赞 · 0采集

雪豹1993 2020-01-31

安装ejs-loader：

npm install ejs-loader --save-dev

app.js

import './css/common.css';
import Layer from './components/layer/layer.js';

const App = function() {
    var dom = document.getElementById('app');
    var layer = new Layer();
    dom.innerHTML = layer.tpl({
        name: 'john',
        arr: ['apple', 'xiaomi', 'oppo']
    });
};

new App();

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              // 排除
              exclude: /node_modules/,
              query: {
                  presets: ["@babel/preset-env"]
              }
          },
          {
              test: /\.html$/,
              loader: 'html-loader'
          },
          {
              test: /\.tpl$/,
              loader: 'ejs-loader'
          },
          {
              test: /\.css$/,
              use: [
                  'style-loader',
                  // 用来处理css中引入的css
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  {
                      loader: 'postcss-loader',
                      options: {
                          ident: 'postcss',
                          plugins: [
                              require('autoprefixer')({
                                  broswers: ['last 5 versions']
                              }),
                          ]
                      }
                  }
              ]
          },
          {
              test: /\.less$/,
              use: [
                  'style-loader',
                  // 用来处理css中引入的css
                  'css-loader',
                  {
                      loader: 'postcss-loader',
                      options: {
                          ident: 'postcss',
                          plugins: [
                              require('autoprefixer')({
                                  broswers: ['last 5 versions']
                              }),
                          ]
                      }
                  },
                  { loader: 'less-loader'}
              ]
          },
          {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    // 用来处理css中引入的css
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')({
                                    broswers: ['last 5 versions']
                                }),
                            ]
                        }
                    },
                    { loader: 'sass-loader'}
                ]
          }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // html 标题
            title: 'this is a.html',
            // 使用模板
            template: 'index.html',
            // script标签插入位置
            inject: 'body'
        }),
    ],
};

layer.tpl

<div class="layer">
    <div> this is a <%= name %> layer </div>
    <% for (var i = 0;i < arr.length; i++ ) { %>
    <%= arr[i] %>
    <% } %>
</div>

layer.js

import  './layer.less';
import tpl from './layer.tpl';

function layer() {
    return {
        name: 'layer',
        tpl: tpl
    };
}

export default layer;

0赞 · 1采集

雪豹1993 2020-01-31

安装html-loader：

https://www.npmjs.com/package/html-loader

npm install html-loader --save-dev

layer.html

<div class="layer">
    <div>
        this is a layer
    </div>
</div>

layer.js

import  './layer.less';
import tpl from './layer.html';

function layer() {
    return {
        name: 'layer',
        tpl: tpl
    };
}

export default layer;

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              // 排除
              exclude: /node_modules/,
              query: {
                  presets: ["@babel/preset-env"]
              }
          },
          {
              test: /\.html$/,
              loader: 'html-loader'
          },
          {
              test: /\.css$/,
              use: [
                  'style-loader',
                  // 用来处理css中引入的css
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  {
                      loader: 'postcss-loader',
                      options: {
                          ident: 'postcss',
                          plugins: [
                              require('autoprefixer')({
                                  broswers: ['last 5 versions']
                              }),
                          ]
                      }
                  }
              ]
          },
          {
              test: /\.less$/,
              use: [
                  'style-loader',
                  // 用来处理css中引入的css
                  'css-loader',
                  {
                      loader: 'postcss-loader',
                      options: {
                          ident: 'postcss',
                          plugins: [
                              require('autoprefixer')({
                                  broswers: ['last 5 versions']
                              }),
                          ]
                      }
                  },
                  { loader: 'less-loader'}
              ]
          },
          {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    // 用来处理css中引入的css
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')({
                                    broswers: ['last 5 versions']
                                }),
                            ]
                        }
                    },
                    { loader: 'sass-loader'}
                ]
          }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // html 标题
            title: 'this is a.html',
            // 使用模板
            template: 'index.html',
            // script标签插入位置
            inject: 'body'
        }),
    ],
};

app.js

import './css/common.css';
import Layer from './components/layer/layer.js';

const App = function() {
    var dom = document.getElementById('app');
    var layer = new Layer();
    dom.innerHTML = layer.tpl;
};

new App();

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack app</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

0赞 · 0采集

qq_初代_千手柱间 2019-07-07

html-load处理模板

截图
0赞 · 0采集
慕仰0906943 2018-09-01
对模板进行打包：将模板处理成一个字符串赋值给一个对象的某个属性，再返回这个对象，最后通过对象的属性就可调用这个模板
webpack和npm run webpack的区别：前者是webpack默认的基本命令，后者是执行package.json里面的scripts标签。

html-loader可以处理webpack中的HTML模板
1.安装：npm install html-loader --save-dev
2.配置：{ test:/\.html$/, loader:'html-loader' }
3.app.js中引入并初始化：
import './css/common.css';
import Layer from './components/layer/layer.js';
const App = function() {
        var dom = document.getElementById('app');
         var layer = new Layer();
         dom.innerHTML = layer.tpl;
}
new App();
注意事项：
1. html-webpack-plugin 会和 html-loader冲突，如果引入html-loader 会导致<%=htmlWebpackPlugin.options.title %> 编译不出。
2. inject: 'body'不能写成head,那样获取不到app这个id,因为<div id='app'></div>是在body中。
3. 编译后不会再 ./dist/index.html中显示，但在浏览器中可以显示。
webpack的tpl模板支持ejs语法，
1.ejs安装：cnpm install ejs-loader --save-dev
2.配置：{ test:/\.tpl$/, loader:'ejs-loader' }
3.写法：
         <h1>study hard! my name is <%=name%></h1>
         <%for(var i=0;i<arr.length;i++){%>
         <%=arr[i]%>
         <%}%>
4.传参：dom.innerHTML = layer.tpl({ name:'xiaohe', arr:['oppo','huawei','xiaomi'] });
0赞 · 0采集
一飞同学 2018-05-28

vue中的render函数可以直接使用jsx语法

截图
0赞 · 0采集
慕粉1937139407 2018-03-24
webpack4.2可以注入div的代码。
webpack4貌似过滤了使用dom.innerHtml这个方法来注入标签。如果想要完成老师的实验可以按照我说的做。
首先npm i jquery，安装jquery。
然后app.js文件里边，像这样写
```
import './css/common.css';
import layer from './components/layer/layer';
import $ from 'jquery';

const App = function() {
    let $dom = $('#app');
    let ly = layer();
    $dom.html(ly.tpl);
}

new App();
```
然后运行webpack，就可以插入div了。大家可以试试看
1赞 · 0采集
sTone_StarDust 2018-02-27

模板： 1- index.html模板文件中：有一个作为根节点的<div>元素，例如<div id="root"></div> 2- app.js: 作为动态引入模板的js部分： import layer from './components/layer/layer.js'; const App = function () { var dom = document.getElementById('#app'); //拿到真实的DOM元素 var layer = new Layer(); dom.innerHtml = layer.tpl; } new App(); 模板文件有些类似于源文件，面向开发者；而webpack将模板文件打包生成的文件，面向的是浏览器，做最终的呈现用的最终，模板 + js 会一起被webpack打包成最终的html文件

截图
0赞 · 0采集
冷月诗魂 2018-01-05

一、layer.html是模板文件 1、处理模板文件的做法：（1）webpack将模板文件当做一个字符串进行处理。（2）webpack将模板文件当成已经编译好的的模板的处理函数。对js模板语法，模板引擎，模板的作用的认识和了解再来看这章会比较容易理解。二、要支持html文件，安装html-loader 终端目标文件输入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安装ejs 终端目标文件输入：npm install ejs-loader --save-dev layer.js载入ejs模板时，返回的是一个function，这时的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一个已经编译过的函数四、react——jsx vue——jsx

3赞 · 3采集
冷月诗魂 2018-01-05

41.webpack和npm run webpack的区别：前者是webpack默认的基本命令，后者是执行package.json里面的scripts标签。 42.html-loader可以处理webpack中的HTML模板 1.安装：npm install html-loader --save-dev 2.配置：{ test:/\.html$/, loader:'html-loader' } 3.app.js中引入并初始化： import './css/common.css'; import Layer from './components/layer/layer.js'; const App = function() { var dom = document.getElementById('app'); var layer = new Layer(); dom.innerHTML = layer.tpl; } new App(); 注意事项： 1.html-webpack-plugin 会和 html-loader冲突，如果引入html-loader 会导致<%=htmlWebpackPlugin.options.title %> 编译不出。 2.inject: 'body'不能写成head,那样获取不到app这个id,因为<div id='app'></div>是在body中。 3.编译后不会再 ./dist/index.html中显示，但在浏览器中可以显示。 43.webpack的tpl模板支持ejs语法， 1.ejs安装：cnpm install ejs-loader --save-dev 2.配置：{ test:/\.tpl$/, loader:'ejs-loader' } 3.写法： <h1>study hard! my name is <%=name%></h1> <%for(var i=0;i<arr.length;i++){%> <%=arr[i]%> <%}%> 4.传参：dom.innerHTML = layer.tpl({ name:'xiaohe', arr:['oppo','huawei','xiaomi'] });

3赞 · 3采集
慕用6971699 2017-11-12

123

截图
0赞 · 0采集
貌似祸害 2017-11-03

一样敲下来，（当然，webpack.config.js按照3.x的写法改过），不报错，但是div就是插不进了，o(╥﹏╥)o

3赞 · 0采集
你丫xiao笨熊 2017-09-18

41.webpack和npm run webpack的区别：前者是webpack默认的基本命令，后者是执行package.json里面的scripts标签。 42.html-loader可以处理webpack中的HTML模板 1.安装：npm install html-loader --save-dev 2.配置：{ test:/\.html$/, loader:'html-loader' } 3.app.js中引入并初始化： import './css/common.css'; import Layer from './components/layer/layer.js'; const App = function() { var dom = document.getElementById('app'); var layer = new Layer(); dom.innerHTML = layer.tpl; } new App(); 注意事项： 1.html-webpack-plugin 会和 html-loader冲突，如果引入html-loader 会导致<%=htmlWebpackPlugin.options.title %> 编译不出。 2.inject: 'body'不能写成head,那样获取不到app这个id,因为<div id='app'></div>是在body中。 3.编译后不会再 ./dist/index.html中显示，但在浏览器中可以显示。 43.webpack的tpl模板支持ejs语法， 1.ejs安装：cnpm install ejs-loader --save-dev 2.配置：{ test:/\.tpl$/, loader:'ejs-loader' } 3.写法： <h1>study hard! my name is <%=name%></h1> <%for(var i=0;i<arr.length;i++){%> <%=arr[i]%> <%}%> 4.传参：dom.innerHTML = layer.tpl({ name:'xiaohe', arr:['oppo','huawei','xiaomi'] });

1赞 · 1采集
JoKer49 2017-07-23

一、layer.html是模板文件 1、处理模板文件的做法：（1）webpack将模板文件当做一个字符串进行处理。（2）webpack将模板文件当成已经编译好的的模板的处理函数。对js模板语法，模板引擎，模板的作用的认识和了解再来看这章会比较容易理解。二、要支持html文件，安装html-loader 终端目标文件输入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安装ejs 终端目标文件输入：npm install ejs-loader --save-dev layer.js载入ejs模板时，返回的是一个function，这时的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一个已经编译过的函数四、react——jsx vue——jsx

0赞 · 0采集
站在黄淮大门口 2017-07-11

各种loader 写法

0赞 · 1采集
彩虹糖2 2017-06-09

我根据老师讲解的内容用webpack2.0写了一遍，源码在https://github.com/manlili/webpack_learn，喜欢给点颗星星，谢谢！

0赞 · 1采集
Oooooooh 2017-04-09

js 模板

截图
0赞 · 0采集
aSuncat 2017-04-08

一、layer.html是模板文件 1、处理模板文件的做法：（1）webpack将模板文件当做一个字符串进行处理。（2）webpack将模板文件当成已经编译好的的模板的处理函数。对js模板语法，模板引擎，模板的作用的认识和了解再来看这章会比较容易理解。二、要支持html文件，安装html-loader 终端目标文件输入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安装ejs 终端目标文件输入：npm install ejs-loader --save-dev layer.js载入ejs模板时，返回的是一个function，这时的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一个已经编译过的函数四、react——jsx vue——jsx

5赞 · 13采集

数据加载中...