安科网

webpack实用配置

软件设计

软件设计

2017-06-16

关注 关注

前面的话

上文介绍了webpack入门，本文将详细介绍webpack实用配置

版本号

以entry.js打包为bundle.js为例，出口的filename可以设置为[id]、[name]、[hash]、[chunkhash]等替换形式，如下所示

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

则出口文件为0-main-0c1dce21f6c5db455fb4.js

webpack实用配置

如果index.html要引用打包后的js文件，由于文件名称不确定，并不好解决。这时，就需要使用html-webpack-plugin插件。该插件并不是内置插件，所以需要安装

npm install html-webpack-plugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为webpack包提供服务。这对于在文件名中包含每次会随着变异会发生变化的哈希的webpack bundle尤其有用

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'
    })
  ]
}

通过以上的配置，如果在当前路径，index.html不存在，则生成；如果存在，则替换

webpack实用配置

[注意]如果htmlwebpackplugin不进行配置，参数为空， plugins: [new HtmlWebpackPlugin()]。默认地，生成的html文件名称为'index.html'，标题为'Webpack APP' 

webpack实用配置

【标签位置】

htmlwebpackplugin插件的常用设置是设置script标签插入的位置，默认插入到body标签中，但可以使用inject:'head'，设置插入到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'
    })
  ]
}
webpack实用配置

【图标设置】

设置favicon属性，可以设置网页的小图标

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'
    })
  ]
}
webpack实用配置

【压缩】

设置minify属性，可以压缩html文件，默认为false，即不压缩

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//删除空格
      }
    })
  ]
}

使用webpack打包后的index.html代码如下

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

模板文件

HtmlWebpackPlugin除了提供模块版本号的功能，还可以使用模板文件

例如，模板文件为template.html，内容如下

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

webpack配置文件如下

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'
    })
  ]
}

生成的index-[hash].html以'template.html'文件为模板

webpack实用配置

[注意]如果在htmlwebpackplugin中使用了模板，则指定title不会生效，因为要以模板的title为准　　

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'
    })
  ]
}
webpack实用配置

【传参】

模块文件当然是可以传参的，一般地，使用ejs语法。例如，在模板文件中，使用<%= htmlWebpackPlugin.options.title %>，即可读取htmlWebpackPlugin插件中'title'属性的值

[注意]模板文件中的'htmlWebpackPlugin'是固定的，不能随意更改。与webpack.config.js文件中，require()该插件的命名无关

//webpack.config.js
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',
      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>
webpack实用配置

【模板组件】

下面利用模板组件组合成一个html文件，以ejs模板语言为例

//webpack.config.js
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:'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>

运行结果报错，提示子模板加载失败

webpack实用配置

这是因为HtmlWebpackPlugin插件并不具备ejs模板语言所有的功能，其中一个就是不能识别<%include %>语句，这时需要安装一个ejs-compiled-loader

npm install ejs-compiled-loader

安装完成后，修改配置文件如下，表示使用ejs-compiled-loader来编译template.html

[注意]该插件中的include路径相对于webpack配置文件的位置，而不是模板文件template.html的位置

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'})
  ]
}

结果如下

webpack实用配置

多页面

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

//webpack.config.js
var 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']
    }),    
  ]
}

结果如下

//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"></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"></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"></script></body>
</html>

内联

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

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

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

inlineSource: '.(js|css)$' // embed all javascript and css inline
//webpack.config.js
var 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()
  ]
}

结果如下

<!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>

babel

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

npm install babel-loader babel-core

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

npm install babel-preset-env

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

//webpack.config.js
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$/,
          use:{
              loader:'babel-loader',
              options:{
                  presets: ['env']
              }
          }
      }]
  },
  plugins: [
    new HtmlWebpackPlugin({})
  ]
}
//app.js
let num = 1;
console.log(num);

【打包速度】

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

webpack实用配置

前面的博文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({})
  ]
}
webpack实用配置

当然了，除了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({})
  ]
}
webpack实用配置

　

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
//app.js
require('./css/common.css');
//common.css
body{margin: 0;background-color: red}
//webpack.config.js
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:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 'css-loader' ]
          }
      ]
  },
  plugins: [
    new HtmlWebpackPlugin({})
  ]
}

效果如下

webpack实用配置

【自动前缀】

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

首先，先安装postcss-loader

npm install postcss-loader

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

npm install autoprefixer

配置如下

//common.css
body{transform: scale(0);background-color: red}
//app.js
require('./css/common.css');
//webpack.config.js
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:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 
                    'css-loader',                    
                    {
                        loader: 'postcss-loader',
                        options: {plugins: [require('autoprefixer')]}            
                    }
                 ]
          }
      ]
  },
  plugins: [
    new HtmlWebpackPlugin({})
  ]
}

结果如下

webpack实用配置

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

//common.css
@import './flex.css';
body{transform: scale(0);background-color: red}
//flex.css
body{display:flex;}
//app.js
require('./css/common.css');

//webpack.config.js
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:{
      rules:[
          {
              test:/\.css$/,
              use:[ 'style-loader', 
                  { loader: 'css-loader',
                    options: {importLoaders: 1} 
                  },
                'postcss-loader'
                ]
          }
      ]
  },
  plugins: [
    new HtmlWebpackPlugin({})
  ]
}

//postcss.config.js
module.exports = {
 plugins:[require('autoprefixer')]
}

结果如下

webpack实用配置

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

npm install postcss-import
//common.css
@import './flex.css';
body{transform: scale(0);background-color: red}
//flex.css
body{display:flex;}
//app.js
require('./css/common.css');

//webpack.config.js
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:{
      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({})
  ]
}

结果如下

webpack实用配置

【sass】

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

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

npm install sass-loader node-sass

由于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.js
require('./components/layer/layer.scss');

//webpack.config.js
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:{
      rules:[
          {
              test:/\.scss$/,
              use:[    'style-loader', 
                      'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {plugins: [require('autoprefixer')]}            
                    },
                    'sass-loader'
                 ]
          }
      ]
  },
  plugins: [
    new HtmlWebpackPlugin({})
  ]
}

结果如下

webpack实用配置

【分离CSS】

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

npm install extract-text-webpack-plugin

该插件的配置如下

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")
  ]
}

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

webpack实用配置

图片资源

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

npm install file-loader

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

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

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

//webpack.config.js
var 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.js
require('./src/css/common.css');
//common.css
body{background: url('../img/eg_bulbon.gif')}

结果如下

webpack实用配置

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

//webpack.config.js
var 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('../src/img/eg_bulbon.gif')}" alt="">
</body>
</html>

结果如下

webpack实用配置

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

//webpack.config.js
var 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="">

结果如下

webpack实用配置

【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 个匹配结果
{
  test:/\.(png|jpg|gif|svg)$/i,
  use:[{
              loader:'file-loader',
            options: {
                name:'[name]-[hash:5].[ext]'
            }  
        }]
}

或者

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

结果如下

webpack实用配置

【url-loader】

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

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

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

npm install url-loader

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

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

结果如下

webpack实用配置

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

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

【image-webpack-loader】

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

npm install image-webpack-loader

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

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

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

webpack实用配置

实用配置

下面将使用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.css
        new ExtractTextPlugin("style.css")
    ]
}

webpack htmlwebpackplugin

软件设计

软件设计

3 关注 6 粉丝 0 动态

关注 关注

相关推荐

webpack之常用plugin的配置和使用

html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包

SelinaChan 2020-07-28

带你使用webpack快速构建web项目的方法

使用webpack构建web项目以及热部署插件的使用，按以下步骤，能帮助你快速构建和理解~详细学习还得靠官方文档！你得先安装了Node.js此处不赘述。使用此插件我们将会自动在打包的时候创建index.html，且无须关心bundle.js的文件路径。打包

不知道该写啥QAQ 2020-11-12

Webpack的Loader和Plugin的区别

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言转换为JavaScript，或者将内联图像转换为data URL。module.rules可以指定多个

webfullStack 2020-11-09

vscode 调试 node.js的方法步骤

作为前端工程师经常打交道的开发工具无非 IDE 编辑器 和 Chrome，在 Chrome 中调试是非常方便的，直接在 开发者工具的 source 栏打断点就可以了。那么，如果遇到需要写 node 相关的代码，比如 webpack 配置项，应该怎么调试来实

Yvettre 2020-09-15

如何用5分钟开发一个 Webpack Loader？

今天分享的内容是如何开发一个简单的Webpack Loader，希望通过这个过程能够让你 Get 到 Webpack Loader 的工作原理与机制。这里我的需求是开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。我们

想做大牛的蜗牛 2020-10-30

为 Vue 的惰性加载加一个进度条

通常用 Vue.js 编写单页应用时，当加载页面时，所有必需的资源都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。借助 Webpack，可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。Vue.js 中

gloria0 2020-10-26

详解webpack的文件监听实现(热更新)

文件监听是在源码发生变化时，自动重新构建出新的输出文件。"test": "echo \"Error: no test specified\" && exit 1",

gaojie0 2020-09-11

Runoob-ES6：ES6 环境搭建

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。如果你还不了解 No

SelinaChan 2020-08-14

配置webpack

在全局安装webpack: npm install webpack -g. 在项目的根目录创建一个 webpack.config.js. // entry: 打包的入口文件，一个字符串或者一个对象。// output: 配置打包的结果，一个对象。// f

不知道该写啥QAQ 2020-08-09

vue—cli脚手架

使用npm全局安装webpack，打开命令行工具输入：npm install webpack -g或者，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cl

gloria0 2020-08-09

Webpack 原理浅析

Webpack迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的Webpack。假设某一天，我们接到

不知道该写啥QAQ 2020-08-02

第一个Vue页面

安装完后，打开cmd命令行界面。安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！--- 是否安装vue路由 -->. --- 是否启动ESLint代码检测 -->. --- 是否设置单元测试 -->. --- 是

hline 2020-07-29

【webpack】webpack打包之后调试源码

注释掉的UglifyJsPlugin用于js打包、压缩、混淆

yqoxygen 2020-07-28

ABAP, UI5和webpack的处理入口

如果一个UI5应用配置到portal的Fiori Launchpad里,那么应用的入口是Component.js. 另一种方式不需要launchpad，只需要在一个standalone的html里自己新建一个component的运行环境:. 那么只需要关注

wangdianyong 2020-07-23

ABAP, Maven, CF App和Webpack的build

命令行mvn clean install后，生成的jar文件默认位于target folder下。在包含了这个yaml文件的folder里使用cf push，因为里面指定了java_buildpack作为buildpack，应用upload到cloud f

webpackvuees 2020-07-23

vue.js 安装

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。This will install Vue 2.x version of the

yqoxygen 2020-07-20

基于vue-cli搭建vue项目开发环境

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。，这里就默认你安装node.js. webpack-simple

不知道该写啥QAQ 2020-07-18

06、Webpack使用loader配置css文件、图片文件、

loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader

waterv 2020-07-18

Ant-design中使用jQuery

‘window.jQuery‘: ‘jquery‘,上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、wind

81463166 2020-07-17

如何科学修改node_modules里的文件

有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装

yqoxygen 2020-07-16
软件设计

软件设计

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号