webpackwebpack入门


备注

Webpack是一个模块捆绑器,它读取具有依赖关系的模块并生成表示这些模块的静态资产。

它具有可扩展的加载器系统 ,允许捆绑包不仅包括Javascript资产,还包括CSS,图像,HTML等等。

例如,使用内置的Javascript加载器, css-loaderurl-loader

require("./code.js") // Load Javascript dependency
var css = require("./styles.css"); // Load CSS as a string
var base64Image = require("./image.png"); // Load an image as a base64 string

将成为单个捆绑文件:

// From code.js
console.log("Hello, World");
// From styles.css
var css = "body { margin: 0; padding: 0; } h1 { color: #FF0000; }";
// From image.png
var base64Image = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX...";

可以在任何最常见的模块样式(CommonJS和AMD)中定义依赖关系。

版本

发布日期
3.0.0 2017年6月19日
2.6.1 2017年5月25日
2.6.0 2017年5月23日
2.5.1 2017年5月7日
2.5.0 2017年5月4日
2.4.1 2017年4月14日
2.4.0 2017年4月14日
1.13 2016年4月17日
1.12 2015年8月25日
1.11 2015年8月6日
1.10 2015年6月27日
1.9 2015年5月10日
1.8 2015年4月29日
1.7 2015-03-11
1.6 2015-02-24
1.5 2015年1月21日
1.4 情节中字
1.3 2014年8月25日
1.2 2014年5月27日
1.1 2014年5月17日
1.0 2014年3月1日
0.11 2013-12-31
0.10 2013年6月19日
0.9 2013年3月19日
0.8 2013年1月21日

Javascript + CSS +字体+图像的示例

必需的模块

npm install --save-dev webpack extract-text-webpack-plugin file-loader css-loader style-loader
 

文件夹结构

.
└── assets
    ├── css
    ├── images
    └── js
 

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const glob = require('glob');

module.exports = {
  entry: {
    script: path.resolve(__dirname, './assets/js/app.js'),
    style: path.resolve(__dirname, './assets/css/app.css'),
    images: glob.sync(path.resolve(__dirname, './assets/images/**/*.*')),
  },
  context: __dirname,
  output: {
    path: path.resolve('./dist/assets'),
    publicPath: '/dist/assets',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        }),
      },
      {
        test: /(\.woff2?|\.woff|\.ttf|\.eot|\.svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader?name=[name]-[hash:6].[ext]',
      },
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        loader: 'file-loader?name=[name].[ext]',
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('app.css' /* optional: , { allChunks: true } */),
  ],
};
 

glob.sync('./assets/images/**/*.*') 将要求images文件夹中的所有文件作为条目。

ExtractTextPlugin 将获取生成的输出并创建捆绑的css 文件。

带有babel的webpack.config.js的示例

依赖

npm i -D webpack babel-loader
 

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    app: ['babel-polyfill', './src/'],
  },
  output: {
    path: __dirname,
    filename: './dist/[name].js',
  },
  resolve: {
    extensions: ['', '.js'],
  },
  module: {
    loaders: [{
      test: /\.js$/, 
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, 'src')
    }],
  }
};
 

安装

先决条件:

NodeJSnpm

安装Webpack有两种方法:全局或每个项目。最好是按项目安装依赖项,因为这将允许您为每个项目使用不同版本的webpack,并且不要求用户在全局安装webpack。

安装每个项目

从项目的根文件夹运行以下命令:

npm install webpack --save-dev
 

然后,您可以运行安装到node_modules 的webpack可执行文件:

./node_modules/.bin/webpack
 

或者在package.json 文件中创建一个NPM脚本,您可以在其中省略node_modules 部分 - npm是智能的,应该在其PATH中包含该文件夹。

// in package.json:
{
  ...
  "scripts": {
    "start": "webpack"
  },
  ...
}

// from terminal:
npm start
 

全局安装

在提示符处运行以下命令:

npm install webpack -g
 

使用Node.js进行简单的webpack设置

文件夹结构

.
├── lib
├── modules
|   ├── misc.js
|   ├── someFunctions.js
├── app.js
├── index.html
├── package.json
├── webpack.config.js
└── webserver.js   
 

的package.json

{
  "name": "webpack-example-with-nodejs",
  "version": "1.0.0",
  "description": "Example using webpack code-splitting with some Node.js to support the example",
  "main": "webserver.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "@Gun",
  "license": "ISC",
  "devDependencies": {
    "body-parser": "^1.17.1",
    "express": "^4.15.2",
    "http": "0.0.0",
    "morgan": "^1.8.1",
    "multer": "^1.3.0",
    "webpack": "^2.4.1"
  }
}
 

webpack.config.js

var path = require('path'); // used to get context

module.exports = {
    context: path.join(__dirname, 'app'), // resolves entry below, must be absolute path
    entry: './app.js', // entry point or loader for the application
    output: {
        path: path.join(__dirname, 'app/lib'), // express static folder is at /app/lib
        filename: '[name].bundle.js', // the file name of the bundle to create.  [name] is replaced by the name of the chunk (code-splitting)
        publicPath: 'static' // example uses express as the webserver
    }
};
 

webserver.js

var express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    multer = require('multer')()
    logger = require('morgan'),
    fs = require('fs'),
    http = require('http');

var app = express();
var port = 31416;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger('short'));
app.use('/jsBundles',express.static('lib'));
app.get('/', function(request, response){
    response.sendFile(__dirname + '/index.html');
});

var server = http.createServer(app).listen(port, function(){
    console.log("I feel a disturbance in the port:" + port);
});
 

的index.html

<!DOCTYPE html>
<html>
    <body>
        <div id="someValue"><label for="num">Enter a number:</label><input id="num" /></div>
        <div class="buttonList">
            <ul>
                <li><button id="doubleIt">double it</button></li>
                <li><button id="tripleIt">triple it</button></li>
            </ul>
        </div>
        <div id="someOtherValue">
            And the count shall be: <span id="theCount"></span>
        </div>
        <script src="/jsBundles/main.bundle.js"></script>        
    </body>
</html>
 

app.js

require(['./modules/someFunctions'],function(){
        window.onload = function(){
                var someFunctions  = require('./modules/someFunctions');             
                document.getElementById('doubleIt').onclick = function(){
                        var num = document.getElementById('num').value;
                        document.getElementById('theCount').innerHTML = someFunctions.Double(num);
                };

                document.getElementById('tripleIt').onclick = function(){
                        var num = document.getElementById('num').value;
                        document.getElementById('theCount').innerHTML = someFunctions.Triple(num);
                };
        };
});
 

misc.js

var self = {};
self.isNumber = function(value){
    // http://stackoverflow.com/questions/9716468/is-there-any-function-like-isnumeric-in-javascript-to-validate-numbers
    return !isNaN(parseFloat(value)) && isFinite(value);
};
module.exports = self;
 

someFunctions.js

require(['./misc'], function(){
    var misc= require('./misc');

    var self = {};
    self.Double = function(value){
        if(!misc.isNumber(value)){
            return 0;
        };
        return value*2;
    }

    self.Triple = function(value){
        if(!misc.isNumber(value)){
            return 0;
        };
        return value*3;
    }

    module.exports = self;
});
 

注意

运行npm i --save-dev来安装依赖项

安装依赖项后运行节点。\ node_modules \ webpack \ bin \ webpack.js

运行节点webserver.js以启动服务器

Webpack简单示例

使用Webpack所需的最低要求是以下命令:

webpack ./src/index.js ./dist/bundle.js

// this is equivalent to:

webpack source-file destination-file
 

Web包将获取源文件,编译到输出目标并解析源文件中的所有依赖项。

Webpack,React JSX,Babel,ES6,简单配置

确保安装正确的npm依赖项(babel决定将自己拆分为一堆软件包,与“对等依赖项”有关):

npm install webpack webpack-node-externals babel-core babel-loader babel-preset-react babel-preset-latest --save

webpack.config.js

module.exports = {
    context: __dirname, // sets the relative dot (optional)
    entry: "./index.jsx",
    output: {
        filename: "./index-transpiled.js"
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: "babel?presets[]=react,presets[]=latest" // avoid .babelrc
        }]
    }, // may need libraryTarget: umd if exporting as a module
    externals: [require("webpack-node-externals")()], // probably not required
    devtool: "inline-source-map"
};
 

webpack-node-externals 是一个扫描node_modules 并确保它们不会与前端代码一起编译和捆绑的函数,但它确保bundle保留对它们的引用。这有助于加快转换速度,因为您不会重新编码库。