Webpack 配置示例

时间  2019-11-30
标签 webpack 配置 示例 繁體版
原文   原文链接

Webpack 做为前端构建工具，对于大型网站开发，大大提高了开发效率。要使用webpack须要先安装webpack工具；javascript

先来看一个最简单的命令css

$ webpack main.js bundle.js

该命令将 main.js 输出到 bundle.js 。html

一般，都不会这样直接使用使用，而是在项目根目录下进行打包配置，配置文件默认为webpack.config.js。前端

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

以后，直接在命令行中使用 webpack 就能进行打包了！java

除了直接使用 webpack 进行打包以外，还能够对打包命令进行一些选择性的配置：node

  • webpack – for building once for development
  • webpack -p – for building once for production (minification)
  • webpack --watch – for continuous incremental build
  • webpack -d – to include source maps
  • webpack --colors – for making things pretty

一样，这些配置也能够写进 package.json 配置文件中react

// package.json
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  // ...
}

1. entry

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

entry 除了使用一个单一的 js 文件以外，还可使用多个 js 文件；jquery

module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

2. Babel-loader

Loader 是源代码转换预处理器(more info). 例如, Babel-loader 能够将 JSX/ES6 转换成 JS 文件. 参见官方文档：loaders.webpack

// main.jsx is a JSX file.

const React = require('react');
const ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.querySelector('#wrapper')
);

index.htmlgit

<html>
  <body>
    <div id="wrapper"></div>
    <script src="bundle.js"></script>
  </body>
</html>

webpack.config.js

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  }
};

module.loaders 用于指定 loaders. 上面的代码片断使用了 babel-loader，也用到了babel-preset-es2015 和 babel-preset-react 用来转换 ES6 和 React。也可使用以下的query的方式来配置：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

3. CSS-loader

Webpack 使咱们能够经过 require 引用一个css文件并结合css-loader处理以后输出成一个模块。

main.js

require('./app.css');

app.css

body {
  background-color: blue;
}

index.html

<html>
  <head>
    <script type="text/javascript" src="bundle.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader?modules' },
    ]
  }
};

注意，这里使用了两个loader来转换css文件。 CSS-loader 用来读取CSS文件, Style-loader用来插入样式到网页中. 不一样的loader用 ! 来链接.

在浏览器中浏览网页，index.html中已经插入了样式表。

<head>
  <script type="text/javascript" src="bundle.js"></script>
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
</head>

4. Image loader

Webpack 还能够经过 require 引用图片文件。

main.js

var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);

var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);

index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }
};

这里使用了 url-loader 来转换图片文件. 若是图片小于 8192 bytes 将会被转换成 Data URL; 不然将会被转换成普通的URL. ? 用来给url-loader传入参数.

两张不一样大小的图片会被转换成不一样的格式以下：

<img src="data:image/png;base64,iVBOR...uQmCC">
<img src="4853ca667a2b8b8844eb2693ac1b2578.png">

5. CSS Module

css-loader?modules 表示打开 CSS Modules 的功能。它表示module中定义的css样式默认是局部做用域；若是须要转换成全局做用域能够经过 :global(.abc) (more info)

index.html

<html>
<body>
  <h1 class="h1">Hello World</h1>
  <h2 class="h2">Hello Webpack</h2>
  <div id="example"></div>
  <script src="./bundle.js"></script>
</body>
</html>

app.css

.h1 {
  color:red;
}

:global(.h2) {
  color: blue;
}

main.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');

ReactDOM.render(
  <div>
    <h1 className={style.h1}>Hello World</h1>
    <h2 className="h2">Hello Webpack</h2>
  </div>,
  document.getElementById('example')
);

webpack.config.js

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules'
      }
    ]
  }
};

6. UglifyJs Plugin

Webpack 有插件支持用来扩展更多的需求。 UglifyJs Plugin 将会最小化输出的js文件.

main.js

var longVariableName = 'Hello';
longVariableName += ' World';
document.write('<h1>' + longVariableName + '</h1>');

webpack.config.js

var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

运行项目，main.js 将被输出成以下格式：

var o="Hello";o+=" World",document.write("<h1>"+o+"</h1>")

注意：若是须要结合使用到postcss，webpack.config.js文件须要有一些小的修改以下：

var values = require("postcss-modules-values");
var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    entry: __dirname + "/index.js",
    output: {
        path:"public",
        publicPath: "/",
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader:'babel-loader'
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader?modules!postcss-loader"
            }
        ]
    },
    plugins:[
        new uglifyJsPlugin({
            compress:{
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            test:/\.css$/,
            options: {
                postcss:[values]
            }
        })
    ]
};
View Code

备注: UglifyJsPlugin还能够对一些指定的变量不进行混淆

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    mangle: {
      except: ['$super', '$', 'exports', 'require']
      //以上变量‘$super’, ‘$’, ‘exports’ or ‘require’，不会被混淆
    },
    compress: {
      warnings: false
    }
  })
]

 

7. HTML Webpack Plugin and Open Browser Webpack Plugin

下面来看如何加载第三方插件

html-webpack-plugin 能够建立index.html， open-browser-webpack-plugin 能够打开一个浏览器窗口当 Webpack 加载完成以后。 
npm install html-webpack-plugin open-browser-webpack-plugin webpack-dev-server --save

main.js

document.write('<h1>Hello World</h1>');

webpack.config.js

var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};

运行 webpack-dev-server.

$ webpack-dev-server

如今不须要手动建立index.html文件，也不须要去打开浏览器窗口了，一切由webpack为咱们包办了！

可能遇到的错误： Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' ，解决办法：在项目中从新安装webpack。

8. Environment flags

能够经过一些配置来对开发环境和正式环境进行一些不一样的操做；

main.js

document.write('<h1>Hello World</h1>');

if (__DEV__) {
  document.write(new Date());
}

webpack.config.js

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};

运行webpack打包并输入环境变量配置：

# Linux & Mac
$ env DEBUG=true webpack-dev-server

# Windows
$ set DEBUG=true
$ webpack-dev-server

process.env 默认为一个空对象，经过 env DEBUG=true命令 为env.DEBUG赋值。

9. Code splitting

对于大型web网站，不可能将全部的js文件都放到一个文件中一次性加载, Webpack 容许咱们将js文件进行分割。

首先，你须要使用 require.ensure 来定义分割点 (official document)

// main.js
require.ensure(['./a'], function(require) {
  var content = require('./a');
  document.open();
  document.write('<h1>' + content + '</h1>');
  document.close();
});

require.ensure 告诉 Webpack，./a.js 文件应该从bundle.js文件中分割出来并编译到一个单独的文件中。

// a.js
module.exports = 'Hello World';

如今webpack将会自动进行编译打包，不须要再进行额外的配置。

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};
从表象上看，没有任区别，但实际上webpack将main.js和a.js编译到两个不一样的文件中了，分别是bundle.js和1.bundle.js文件，当须要用到的时候再加载1.bundle.js文件；

10. Code splitting with bundle-loader

另外一个代码分割的方法是使用 bundle-loader.

// main.js

// Now a.js is requested, it will be bundled into another file
var load = require('bundle-loader!./a.js');

// To wait until a.js is available (and get the exports)
//  you need to async wait for it.
load(function(file) {
  document.open();
  document.write('<h1>' + file + '</h1>');
  document.close();
});

require('bundle-loader!./a.js') 告诉 Webpack 须要从另外的js文件中去加载 a.js。webpack的行为将和上面相同。

11. Common chunk

当多个script文件须要使用到相同的chunk的时候，能够将这个公用的模块经过CommonsChunkPlugin提取到单独的文件中。

// JQ01.js
var $ = require("jquery");
$('#a').text("001");

// JQ02.js
var $ = require("jquery");
$('#b').text("002");

上面的两个不一样的组件中，都同时须要用到 JQuery，甚至会有更多的组件也会如此，此时能够将 JQuery 提取出来，放置到一个公共的 js 文件中。

index.html

<html>
  <body>
    <div id="a"></div>
    <div id="b"></div>
    <script src="vendor.js"></script>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {
    entry: {
        bundle1: "./JQ01.js",
        bundle2: "./JQ02.js",
        vendor: ["jquery"] // option
    },
    output: {
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin({
            name: 'vendor',
            filename: "vendor.js"
        })
    ]
};

随着库愈来愈大，vendor文件也变得愈来愈大，因而考虑打包成两个vendor，把和react相关的库打包成一个vendor，其余的库打包成另一个vendor。

...
entry: { 
    "vendor1": ["react", "react-dom", "react-router", "react-router-redux", "react-redux", "redux"], 
    "vendor2": ["jquery"],
    "app": "./js/index.js" 
},
...
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        names: ["vendor2", "vendor1"],
        minChunks: Infinity
    })
],
...

有两个须要注意的地方：

  • 在CommonsChunkPlugin里面，vender的顺序要反着来，要和加载顺序相反。好比你想按vendor1，vendor2的顺序加载，entry里面写的是vendor1，vendor2，在CommonsChunkPlugin里面要写vendor2，vendor1。
  • output.filename必定不要写死了，要配置成可替换的，相似filename: '[name].js'形式。

12. Vendor chunk

也能够经过 CommonsChunkPlugin 来分割提取出js库。

main.js

var $ = require('jquery');
$('h1').text('Hello World');

index.html

<html>
  <body>
    <h1></h1>
    <script src="vendor.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>
View Code

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: {
    app: './main.js',
    vendor: ['jquery'],
  },
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new CommonsChunkPlugin({
      name: 'vendor', 
      filename: "vendor.js"})
  ]
};
View Code

ProvidePlugin

 
     
若是你但愿一个module能够做为一个变量使用到其它地方，好比使用jQuery的 $ ，咱们能够在任何地方使用而不须要经过 require("jquery")，这就须要用到 ProvidePlugin (Official doc).
 
     
 
      
 
       
// main.js
$('h1').text('Hello World');
 
      
 
      
webpack.config.js
 
      
 
       
var webpack = require('webpack');

module.exports = {
  entry: {
    app: './main.js'
  },
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
};
 
      
 
     
 
     
13. Exposing global variables
 
     
若是咱们想使用一些全局变量，但又不想把它们包含在webpack中，这时候能够经过在webpack.config.js中 配置 externals 来实现 official document
 
     
data.js.
 
     
 
      
 
       
var data = 'Hello World';
 
      
 
     
 
     
将data数据暴露成全局变量
 
     
 
      
 
       
// webpack.config.js
module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
    ]
  },
  externals: {
    // require('data') is external and available
    //  on the global var data
    'data': 'data'
  }
};
 
      
 
     
 
     
如今，经过 var data = require('data') 能够将data.js输出到模块变量中。但实际上data是一个全局变量。
 
     
 
      
 
       
// main.jsx
var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body
);
 
      
 
     
 
     
14. Hot Module Replacement
 
     
Hot Module Replacement (HMR) 当网页发生改变的时候，不须要手动刷新页面。结合webpack-dev-server有两种方式来打开 HMR。
 
     
(1) 在命令中指定 --hot 和 --inline
 
     
 
      
 
       
$ webpack-dev-server --hot --inline
 
      
 
     
 
     
Meaning of the options:
 
     
     
      
  • --hot: adds the HotModuleReplacementPlugin and switch the server to hot mode.
    •  
      
  • --inline: embed the webpack-dev-server runtime into the bundle.
    •  
      
  • --hot --inline: also adds the webpack/hot/dev-server entry.
    •  
     
 
     
(2) 配置 webpack.config.js.
 
     
     
      
  • add new webpack.HotModuleReplacementPlugin() to the plugins field
    •  
      
  • add webpack/hot/dev-server and webpack-dev-server/client?http://localhost:8080 to the entry field
    •  
     
 
     
webpack.config.js
 
     
 
      
var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      },
      include: path.join(__dirname, '.')
    }]
  }
};
 
     
 
     
 
      
Now launch the dev server.
 
     
 
     
 
      
 
       
$ webpack-dev-server
 
      
 
     
 
     
在浏览器中打开 http://localhost:8080 查看网页。保持网页打开，对网页修改一些内容，观察浏览器是否发生改变；
 
     
App.js
 
     
 
      
 
       
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}
 
      
 
     
 
     
index.js
 
     
 
      
 
       
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
 
      
 
     
 
     
index.html
 
     
 
      
 
       
<html>
  <body>
    <div id='root'></div>
    <script src="/static/bundle.js"></script>
  </body>
</html>
 
      
 
     
 
     
15. React router
 
     
参考 React-router 官方示例
 
     
+---------------------------------------------------------+
| +---------+ +-------+ +--------+                        |
| |Dashboard| | Inbox | |Calendar|      Logged in as Jane |
| +---------+ +-------+ +--------+                        |
+---------------------------------------------------------+
 
     
 
      
 
       
$ webpack-dev-server --history-api-fallback 
 
      
 
     
 
    
 
    
 参考链接：
 
     
    
 Webpack 官方文档 : http://webpack.github.io/docs/configuration.html
  
   
 
  
 
 
 



        

            

        	





    

		

            
相关文章

            

                

                

                    

                

            


            
相关标签/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公众号
    

    

           欢迎关注本站公众号,获取更多信息

        
    




    

    




	


	







    

        联系我们
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程