Introduction détaillée à la configuration pratique du webpack-js tutoriel-php.cn

Les mots précédents

Ce qui précède présente l'introduction de webpack Cet article présentera en détail la configuration pratique de webpack

Numéro de version

Emballé avec Entry.js En prenant bundle.js comme exemple, le nom du fichier exporté peut être défini sur [id], [name], [hash], [chunkhash] et d'autres formes de remplacement, comme indiqué ci-dessous

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: '[id]-[name]-[hash].js'//出口名称  }
}

Copier après la connexion

Ensuite, le fichier d'exportation est 0-main-0c1dce21f6c5db455fb4.js

Si index.html veut référencer le fichier js empaqueté, c'est pas facile à résoudre car le nom du fichier est incertain. À ce stade, vous devez utiliser le plug-in html-webpack-plugin. Ce plug-in n'est pas un plug-in intégré, vous devez donc installer

npm install html-webpack-plugin

Copier après la connexion

HtmlWebpackPlugin simplifie la création de fichiers HTML pour fournir des services pour les packages Webpack. Ceci est particulièrement utile pour les bundles webpack qui contiennent un hachage dans le nom de fichier qui change à chaque mutation

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: '[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      title: 'match',//生成的html文件的标题为'match'  filename: 'index.html'//生成的html文件名称为'index.html'    })
  ]
}

Copier après la connexion

Avec la configuration ci-dessus, si l'index est dans le chemin actuel, Si .html n'existe pas, générez-le ; s'il existe, remplacez

　[Note] Si htmlwebpackplugin n'est pas configuré, le paramètre est vide, plugins : [new HtmlWebpackPlugin() ]. Par défaut, le nom du fichier html généré est 'index.html' et le titre est 'Webpack APP'

[Position de la balise]

Couramment plug-ins htmlwebpackplugin utilisés Le paramètre consiste à définir la position où la balise de script est insérée par défaut. Elle est insérée dans la balise body, mais vous pouvez utiliser inject:'head' pour qu'elle soit insérée dans la balise head

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      inject:'head',//将script标签插入到head标签中  filename: 'index-[hash].html',//生成的html文件名称为'index.html'    })
  ]
}

Copier après la connexion

【Paramètres des icônes】

Définissez l'attribut favicon, vous pouvez définir la petite icône de la page Web

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      favicon:'./icon.ico'})
  ]
}

Copier après la connexion

【 Compression】

Définissez l'attribut minify pour compresser les fichiers HTML. La valeur par défaut est false, ce qui signifie aucune compression <.>

Le code index.html fourni avec webpack est le suivant

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      minify:{
          removeComments: true,//删除注释  collapseWhitespace:true//删除空格      }
    })
  ]
}

Copier après la connexion

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack App</title></head><body><script type="text/javascript" src="js/0-main-8128c0c26a4449da7a05.js?1.1.11"></script></body></html>

Copier après la connexion

Fichier modèle

En plus de fournir la fonction de numéro de version du module, HtmlWebpackPlugin peut également utiliser des fichiers modèles

Par exemple, le fichier modèle est template.html, le contenu est le suivant

Le fichier de configuration du webpack est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>
<script src="test.js?1.1.11"></script>
<div>test</div>    
</body>
</html>

Copier après la connexion

L'index généré-[hash] .html utilise le fichier 'template.html' comme modèle

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({  filename: 'index-[hash].html',//生成的html文件名称为'index.html'  template:'template/template.html'//模板文件为'template.html'    })
  ]
}

Copier après la connexion

[Remarque] Si un modèle est utilisé dans htmlwebpackplugin, le titre spécifié ne prendra pas effet car le titre du modèle est utilisé Sous réserve de

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      title:'test',
      filename: 'index-[hash].html',//生成的html文件名称为'index.html'  template:'template/template.html'//模板文件为'template.html'    })
  ]
}

Copier après la connexion

【Passer des paramètres】

Bien sûr, les fichiers de module peuvent recevoir des paramètres, généralement, utilisez la grammaire ejs. Par exemple, dans le fichier modèle, utilisez <%= htmlWebpackPlugin.options.title %> pour lire la valeur de l'attribut 'title' dans le plug-in htmlWebpackPlugin

[Note] 'htmlWebpackPlugin' dans le fichier modèle Il est fixe et ne peut pas être modifié à volonté. Cela n'a rien à voir avec le nom du plug-in require() dans le fichier webpack.config.js

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      title:'test',
      template:'template/template.html',//模板文件为'template.html'  dateData: new Date() 
    })
  ]
}//template.html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title  %></title>
</head>
<body>
<div><%=htmlWebpackPlugin.options.dateData %></div>
</body>
</html>

Copier après la connexion

[Modèle composant]

Ce qui suit utilise des composants de modèle à combiner dans un fichier html, en prenant le langage de modèle ejs comme exemple

Le résultat en cours d'exécution signale une erreur, indiquant que le sous-modèle n'a pas pu être chargé

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      template:'template/template.html'})
  ]
}//template.html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    <% include  template/header.html %>
</div>
<ul>  
    <% var arr = [1,2,3,4,5] %>
    <% for(var i = 0; i < arr.length; i++){ %>  
        <li><%=arr[i] %></li>  
    <% } %>  
</ul>  
<div>
    <% include  template/footer.html %>
</div>
</body>
</html>//header.html<div>我是头部</div>//footer.html<div>我是尾部</div>

Copier après la connexion

C'est parce que le plug-in HtmlWebpackPlugin n'a pas toutes les fonctions du langage de modèle ejs. L'une d'elles est qu'il. ne peut pas reconnaître l'instruction <%include %> Dans ce cas, vous devez installer un ejs-compiled-loader

Une fois l'installation terminée, modifiez la configuration. fichier comme suit, ce qui signifie utiliser ejs-compiled-loader pour compiler template.html

npm install ejs-compiled-loader

Copier après la connexion

[Note] Le chemin d'inclusion dans ce plug-in est relatif à la configuration du webpack. L'emplacement du fichier, pas l'emplacement de le fichier modèle template.html

Le résultat est le suivant

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
      template:'ejs-compiled-loader!template/template.html'})
  ]
}

Copier après la connexion

多页面

　　对于多页面来说，一般地，有多个入口文件。不同的html页面输出对应不同的入口文件。插件plugins()是一个数组，每new一个HtmlWebpackPlugin()，就可以输出一个html页面。这里有两个重要的属性:chunks和excludeChunks，chunks表示所包含的入口文件，excludeChunks表示要排除的入口文件

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
      a:'./src/js/a.js',
      b:'./src/js/b.js',
      c:'./src/js/c.js'
  },
  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
          filename:'a.html',
          template:'src/template/template.html',
          title:'this is a',
          chunks:['a']
    }),new HtmlWebpackPlugin({
          filename:'b.html',
          template:'src/template/template.html',
          title:'this is b',
          chunks:['b']
    }),new HtmlWebpackPlugin({
          filename:'c.html',
          template:'src/template/template.html',
          title:'this is c',
          excludeChunks:['a','b']
    }),    
  ]
}

Copier après la connexion

　　结果如下

//a.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>this is a</title></head><body><div></div><script type="text/javascript" src="js/2-a-9828ea84bd8c12c19b5f.js?1.1.11"></script></body></html>//b.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>this is b</title></head><body><div></div><script type="text/javascript" src="js/1-b-9828ea84bd8c12c19b5f.js?1.1.11"></script></body></html>//c.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>this is c</title></head><body><div></div><script type="text/javascript" src="js/0-c-9828ea84bd8c12c19b5f.js?1.1.11"></script></body></html>

Copier après la connexion

内联

　　在前面的例子中，都是以链接的形式引入入口文件的。有时，为了追求性能，会将其处理为内联的形式。这里就需要安装一个扩展插件html-webpack-inline-source-plugin，专门用来处理入口文件内联的

$ npm install --save-dev html-webpack-inline-source-plugin

Copier après la connexion

　　该插件的使用很简单，使用require()语句引入后，在插件plugins()新建一个html-webpack-inline-source-plugin对象，然后在html-webpack-plugin对象中添加inlineSource属性即可

inlineSource: '.(js|css)$' // embed all javascript and css inline

Copier après la connexion

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  entry: './entry.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  plugins: [new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$'}),new HtmlWebpackInlineSourcePlugin()
  ]
}

Copier après la connexion

　　结果如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript">/******/ (function(modules) { // webpackBootstrap/******/     // The module cache/******/     var installedModules = {};/******//******/     // The require function/******/     function __webpack_require__(moduleId) {/******//******/         // Check if module is in cache/******/         if(installedModules[moduleId]) {/******/             return installedModules[moduleId].exports;/******/         }/******/         // Create a new module (and put it into the cache)/******/         var module = installedModules[moduleId] = {/******/             i: moduleId,/******/             l: false,/******/             exports: {}/******/         };/******//******/         // Execute the module function/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******//******/         // Flag the module as loaded/******/         module.l = true;/******//******/         // Return the exports of the module/******/         return module.exports;/******/     }/******//******//******/     // expose the modules object (__webpack_modules__)/******/     __webpack_require__.m = modules;/******//******/     // expose the module cache/******/     __webpack_require__.c = installedModules;/******//******/     // identity function for calling harmony imports with the correct context/******/     __webpack_require__.i = function(value) { return value; };/******//******/     // define getter function for harmony exports/******/     __webpack_require__.d = function(exports, name, getter) {/******/         if(!__webpack_require__.o(exports, name)) {/******/             Object.defineProperty(exports, name, {/******/                 configurable: false,/******/                 enumerable: true,/******/                 get: getter/******/             });/******/         }/******/     };/******//******/     // getDefaultExport function for compatibility with non-harmony modules/******/     __webpack_require__.n = function(module) {/******/         var getter = module && module.__esModule ?/******/             function getDefault() { return module['default']; } :/******/             function getModuleExports() { return module; };/******/         __webpack_require__.d(getter, 'a', getter);/******/         return getter;/******/     };/******//******/     // Object.prototype.hasOwnProperty.call/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };/******//******/     // __webpack_public_path__/******/     __webpack_require__.p = "";/******//******/     // Load entry module and return exports/******/     return __webpack_require__(__webpack_require__.s = 0);/******/ })/************************************************************************//******/ ([/* 0 *//***/ (function(module, exports) {

document.write('It works.')/***/ })/******/ ]);</script></body>
</html>

Copier après la connexion

babel

　　下面使用babel来进行es最新标准的代码向es5代码的转换，首先需要安装babel核心程序，及babel-loader

npm install babel-loader babel-core

Copier après la connexion

　　在使用babel-loader进行代码转换之前，要先了解到ecmascript标准变化很快，且浏览器支持情况不同。所以，出现了'es2015'、'es2016'、'es2017'、'latest'、'env(new)'等多个不同的标准。这时，要需要来选择从哪个标准进行转换，需要安装插件babel-preset-env

npm install babel-preset-env

Copier après la connexion

　　在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      loaders:[{
          test:/\.js$/,
          use:{
              loader:'babel-loader',
              options:{
                  presets: ['env']
              }
          }
      }]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}

Copier après la connexion

//app.jslet num = 1;
console.log(num);

Copier après la connexion

【打包速度】

　　运行后，页面控制台输出1，转换正常。但是，babel的转换过程却很慢

　　前面的博文webpack的四个基本概念，我们介绍过loader的test属性表示该loader必须满足的条件，上面代码中使用/\.js$/ 来匹配，这样也许会去转译 node_modules 目录或者其他不需要的源代码。这样会大大增加webpack的编译时间

　　要排除 node_modules，就要使用 loaders 配置的 exclude 选项，表示哪些除外，exclude:/node_modules/

　　[注意]exclude也应该用正则的形式，如果用__dirname +'/node_modules'的形式则不会生效

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      loaders:[{
          test:/\.js$/,
          exclude: /node_modules/,
          use:{
              loader: 'babel-loader',
              options:{
                  presets: ['env']
              }
          }
      }]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}

Copier après la connexion

　　当然了，除了exclude选项，也有include选项，能够明确被打包的文件时，使用include将使打包速度更快

　　对于include来说，它比较特别，字符串形式__dirname + './src/'和正则形式/\.\/src/都支持，经过测试，这两种形式的打包速度类似

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      loaders:[{
          test:/\.js$/,
          include:/\.\/src/,
          use:{
              loader: 'babel-loader',
              options:{
                  presets: ['env']
              }
          }
      }]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}

Copier après la connexion

CSS

　　在webpack入门博文中由介绍过CSS插件的简单使用，接下来将详细介绍

　　首先，要安装css-loader和style-loader，css-loader用于读取并加载css文件，style-loader将它插入到页面中

　　[特别注意]在处理css时，最好不要使用include、exclude等属性。include、exclude属性是加快babel转换速度的，和css没什么关系，而且会添乱

npm install css-loader style-loader

Copier après la connexion

//app.jsrequire('./css/common.css');//common.cssbody{margin: 0;background-color: red}//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      rules:[
          {
              test:/\.css$/,  use:[ 'style-loader', 'css-loader' ]
          }
      ]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}

Copier après la connexion

　　效果如下

【自动前缀】

　　页面加载CSS往往并不像上面的情况这么简单，需要处理很多问题，其中一个就是浏览器前缀问题。对于某些属性来说，比如transform，不同浏览器的版本对其支持程度不同，浏览器前缀也不同。这时，就需要能够根据实际情况，自动增加前缀，而postcss-loader就是这样的工具，而且功能要强大的多

　　首先，先安装postcss-loader

npm install postcss-loader

Copier après la connexion

　　然后，安装postcss的自动前缀的插件autoprefixer

npm install autoprefixer

Copier après la connexion

　　配置如下

//common.cssbody{transform: scale(0);background-color: red}//app.jsrequire('./css/common.css');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 'css-loader',                    
                    {
                        loader: 'postcss-loader',
                        options: {plugins: [require('autoprefixer')]}            
                    }
                 ]
          }
      ]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}

Copier après la connexion

　　结果如下

　　如果css文件中出现@import，则有两种处理方式，一种是将postcss文件单独写成配置文件postcss.config.js

//common.css@import './flex.css';
body{transform: scale(0);background-color: red}//flex.cssbody{display:flex;}//app.jsrequire('./css/common.css');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 
                  { loader: 'css-loader',
                    options: {importLoaders: 1} 
                  },'postcss-loader']
          }
      ]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}//postcss.config.jsmodule.exports = {
 plugins:[require('autoprefixer')]
}

Copier après la connexion

　　结果如下

　　另一种需要安装postcss-import插件

npm install postcss-import

Copier après la connexion

//common.css@import './flex.css';
body{transform: scale(0);background-color: red}//flex.cssbody{display:flex;}//app.jsrequire('./css/common.css');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 
                  { loader: 'css-loader',
                    options: {importLoaders: 1 } 
                  },
                  {
                    loader: 'postcss-loader',
                    options: {plugins: [
                          require('postcss-import'),
                          require('autoprefixer')
                        ]
                    }     
                  }
                ]
          }
      ]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}

Copier après la connexion

　　结果如下

【sass】

　　首先，需要安装sass-loader及node-sass

　　[注意]关于node-sass安装的问题移步至此

npm install sass-loader node-sass

Copier après la connexion

　　由于sass-loader中已经自带了关于@import处理的问题。所以，不需要css-loader及postcss-loader的额外处理

//layer.scss@import './flex.scss';
body{
    background-color:green;
    div{
        width: 400px;
    }
}//flex.scss.flex{display:flex;}//app.jsrequire('./components/layer/layer.scss');//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      rules:[
          {
              test:/\.scss$/,
              use:[    'style-loader', 
                      'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {plugins: [require('autoprefixer')]}            
                    },'sass-loader' ]
          }
      ]
  },
  plugins: [new HtmlWebpackPlugin({})
  ]
}

Copier après la connexion

　　结果如下

【分离CSS】

　　默认地，CSS作为模块资源被打包到入口js文件中。有时，需要把CSS文件分离出来，这时就需要用到extract-text-webpack-plugin插件

npm install extract-text-webpack-plugin

Copier après la connexion

　　该插件的配置如下

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './src/app.js',
  output:{
    path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称  },
  module:{
      rules:[
          {
                  test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use:[ 'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {plugins: [require('autoprefixer')]}            
                        },'sass-loader' ]
                })              
          }
      ]
  },
  plugins: [new HtmlWebpackPlugin({}),new ExtractTextPlugin("styles.css?1.1.11")
  ]
}

Copier après la connexion

　　结果如下，该插件将入口文件中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。如果样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载

图片资源

　　webpack在处理图片、音乐、电影等资源文件时，需要使用file-loader

npm install file-loader

Copier après la connexion

　　默认情况下，使用file-loader生成的文件的文件名就是文件内容的MD5哈希值并保留原始扩展名

　　以引入图片资源例，有以下几种情况

　　1、通过css文件的background属性引入

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  module:{

      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 'css-loader' ]
          },
          {
              test:/\.(png|jpg|gif|svg)$/i,
              use:'file-loader'  }
      ]
  },  
  plugins: [new HtmlWebpackPlugin()
  ]
}//entry.jsrequire('./src/css/common.css');//common.cssbody{background: url('../img/eg_bulbon.gif')}

Copier après la connexion

　　结果如下

　　2、通过模板html文件img标签引入，这时需要使用${require('')}将相对路径包裹一次

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  module:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 'css-loader' ]
          },
          {
              test:/\.(png|jpg|gif|svg)$/i,
              use:'file-loader'  }
      ]
  },  
  plugins: [new HtmlWebpackPlugin({
        template:'template/template.html'})
  ]
}//template.html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<img src="${require(&#39;../src/img/eg_bulbon.gif&#39;)}" alt="">
</body>
</html>

Copier après la connexion

　　结果如下

　　3、若模板使用ejs-compiled-loader插件，则无法使用${require('')}语句，需要使用HtmlWebpackPlugin传参来构造绝对路径

//webpack.config.jsvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname + '/dist',//出口路径filename: 'js/[id]-[name]-[hash].js'//出口名称  },
  module:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 'css-loader' ]
          },
          {
              test:/\.(png|jpg|gif|svg)$/i,
              use:'file-loader'  }
      ]
  },  
  plugins: [new HtmlWebpackPlugin({
        template:'ejs-compiled-loader!template/template.html',
        file:__dirname
    })
  ]
}//template.html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    <% include  template/header.html %>
</div>
</body>
</html>//header.html<img src="<%=htmlWebpackPlugin.options.file%>\src\img\eg_bulbon.gif" alt="">

Copier après la connexion

　　结果如下

【file-loader参数】

　　文件名模板占位符有如下几种

[ext] 资源扩展名
[name] 资源的基本名称
[path] 资源相对于 context 查询参数或者配置的路径
[hash] 内容的哈希值，默认为十六进制编码的 md5
[<hashType>:hash:<digestType>:<length>] 可选配置
　　其他的 hashType, 即 sha1, md5, sha256, sha512
　　其他的 digestType, 即 hex, base26, base32, base36, base49, base52, base58, base62, base64
　　length 字符的长度
[N] 当前文件名按照查询参数 regExp 匹配后获得到第 N 个匹配结果

Copier après la connexion

{
  test:/\.(png|jpg|gif|svg)$/i,
  use:[{
              loader:'file-loader',
            options: {
                name:'[name]-[hash:5].[ext]'}  
        }]
}

Copier après la connexion

　　或者

{
  test:/\.(png|jpg|gif|svg)$/i,
  use:['file-loader?name=[name]-[hash:5].[ext]']
}

Copier après la connexion

　　结果如下

【url-loader】

　　url-loader功能类似于file-loader，但是在文件大小(单位byte)低于指定的限制时，可以返回一个dataURL

　　可以通过传递查询参数(query parameter)来指定限制（默认为不限制）。

　　如果文件大小超过限制，将转为使用 file-loader，所有的查询参数也会传过去

npm install url-loader

Copier après la connexion

　　图片的大小为1.1kb，下面将限制设置为2000，则图片将以base64格式传递

{
  test:/\.(png|jpg|gif|svg)$/i,
  use:['url-loader?limit=2000']
}

Copier après la connexion

　　结果如下

　　如果将限制大小设置为1000，图片以src的形式传递

{
  test:/\.(png|jpg|gif|svg)$/i,
  use:[{
              loader:'url-loader',
            options: {
                limit:1000,
                name:'[name]-[hash:5].[ext]'}  
        }]
}

Copier après la connexion

【image-webpack-loader】

　　使用image-webpack-loader来压缩图片

npm install image-webpack-loader

Copier après la connexion

　　插件一张大小为4.1kb的名称为'm.jpg'的图片，配置如下

{
  test:/\.(png|jpg|gif|svg)$/i,
  use:['url-loader?limit=1000&name=[name]-[hash:5].[ext]','image-webpack-loader'
  ]
}

Copier après la connexion

　　结果如下所示，生成大小为3.28kb，名称为'm-c7083.jpg'的图片

实用配置

　　下面将使用webpack搭建一个实用的开发环境

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: './src/app.js',//入口文件    output:{
        path: __dirname,//出口路径filename: 'js/[name].bundle.js'//出口名称    },
    module:{
        rules:[
            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                     use:[ 
                             'css-loader',
                            {
                                loader: 'postcss-loader',//自动添加前缀options: {plugins: [require('autoprefixer')]}            
                            },'sass-loader']
                })              
            },
            {
                test:/\.js$/,
                include:/\.\/src/,
                use:{
                        loader: 'babel-loader',//将最新标准的js代码翻译为es5代码options:{presets: ['env']}
                    }
            },
            {
                test:/\.(png|jpg|gif|svg)$/i,
                use:[//当图片大小大于1000byte时，以[name]-[hash:5].[ext]的形式输出//当图片大小小于1000byte时，以baseURL的形式输出'url-loader?limit=1000&name=[name]-[hash:5].[ext]',//压缩图片'image-webpack-loader']
            }
          ]
    },
    plugins: [          //使用模板生成html文件new HtmlWebpackPlugin({template:'ejs-compiled-loader!template/template.html'}),//分离出css到style.cssnew ExtractTextPlugin("style.css?1.1.11")
    ]
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!