webpack 入门 2

多页应用打包

例如 webpack.config.js 内容

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        demo1: './src/demo1.js',
        demo2: './src/demo2.js'
    },
    output: {
        path: path.resolve(\_\_dirname, 'dist'),
        filename: '[name].[hash].js',
    },
    ...
    plugins: [
        new HtmlWebpackPlugin({
        template: './public/demo1.html',
        filename: 'demo1.html',
        chunks: ['demo1']
        }),
        new HtmlWebpackPlugin({
        template: './public/demo2.html',
        filename: 'demo2.html',
        chunks: ['demo2']
        }),
    ]
}

7.resolve 配置(webpack 如何寻找模块所对应的文件)
例如 webpack.config.js 内容

module.exports = {
    resolve: {
        alias: {
        '@assets': path.resolve(**dirname, '../src/assets'),
        '@src': path.resolve(**dirname, '../src'),
        },
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.less'],
    },
}

区分环境

例如 webpack.base.js,webpack.dev.js,webpack.prod.js

例如 webpack.config.dev.js,内容

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.config.base');

module.exports = merge(baseWebpackConfig, {
mode: 'dev',
...
});

解决跨域

例如 webpack.config.js,内容

module.exports = {
    ...
    devServer: {
        proxy: {
        "/path": "realapi"
        }
    }
}

还可以实现 rewrite

mock

安装 mocker-api

npm install mocker-api -D

创建 mockdata.js,内容

module.exports = {
    'GET /demo1': {data: 'demo1'},
}

例如 webpack.config.js

const mockAPI = require('mocker-api');
module.export = {
    ...
    devServer: {
        before(app){
            mockAPI(app, path.resolve('./mockdata.js'))
        }
    }
}