webpack 3.8.1 learning

(1) entry

1. single entry

const config = {
    entry: './path/to/my/entry/file.js'
}

module.exports = config;

2. Object Syntax

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
}

3. Multi Page Application

const config = {
    entry: {
       pageOne: './src/pageOne/index.js',
       pageTwo：'./src/pageTwo/index.js',
       pageThree: './src/pageThree/index.js'
    }
}

(2) output

1. Usage

const config = {
    output: {
       filename: 'bundle.js',  
       path: '/home/proj/public/assets'  
    }
}

2. Multiple Entry Points

ensure that each file has a unique name

const config = {
    entry: {
       app: './src/app.js',
       search: './src/search.js'
    },
    output: {
       filename: '[name].js'
       path: __dirname + '/dist'
    }
}

3. Advanced

here is a more complicated example of using a CDN and hashes for assets:

const config = {
    output: {
       path: "home/proj/cdn/assets/[hash]",
       publicPath: "http://cdn.example.com/assets/[hash]/"
    }
}

(3) Loaders

1. npm your loaders

npm install --save-dev css-loader  
npm install --save-dev ts-loader   

//instruct webpack to use the css-loader for every .css files
//instruct webpack to use the ts-loader for every .ts files

module.exports = {
    module: {
       rules: [
          { test: /\.css$/, use: 'css-loader'},
          { test: /\.ts$/, use: 'ts-loader'},
       ]
    }
}

2. There are three ways to use loaders in your application:

(一) configuration

module: {
    rules: [
       {
          test: /\.css$/,
          user: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                  modules: true
              }
            }
          ]
       }
    ]
}

(二) inline

import Styles from 'style-loader!css-loader?modules!./styles.css';

(三) CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

(4) Plugins

const Htmlwebpack = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

plugins: [
   new webpack.optimize.UglifyJsPlugin(),
   new HtmlWebpackPlugin({template: './src/index.html'})
]

(5) configuration

the simplest configuration

var path = require('path');

module.exports = {
    entry: './foo.js',
    output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'foo.bundle.js'
    }
}

(6) modules

1. what is a webpack module ?

   An ES2015 statement ： import
   A CommonJS statement：require()
   An AMD statement：define and require
   An css/sass/less statement: @import 

2. supported module types

The webpack community has built loaders for a wide variety of popular languages and language processors,

(7) module resolution

1. a module can be required as a dependency from another module as：

import foo from 'path/to/module'
//or
require('path/to/module')

2. resolving rules in webpack:

using enhanced-resolve, webpack can resolve three kinds of file paths:

Absolute paths

import "home/me/file"

import "C:\\User\\me\\file"

Relative paths

import "../src/file1";
import "./file2";

Module paths

import "module";
import "module/lib/file";

(8) Dependency Graph

任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)（例如图像或 web 字体），并且可以把它们作为依赖提供给你的应用程序。

(9) Targets
因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，

用法：
module.exports = {
target: 'node'
};

多个target :

尽管 webpack 不支持向 target 传入多个字符串，你可以通过打包两份分离的配置来创建同构的库：

var path = require('path');
var serverConfig = {
target: 'node',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'lib.node.js'
}
//…
};

var clientConfig = {
target: 'web', // <=== 默认是 'web'，可省略
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'lib.js'
}
//…
};

module.exports = [ serverConfig, clientConfig ];